<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, maximum-scale=1.0, user-scalable=0"/>
        <meta name="description" content="eOrder Djoedes memudahkan anda memesan makanan di Mie Djoedes">
		<meta name="keywords" content="Eorder Mie Djoedes">

		<title>eOrder Djoedes</title>

		<!-- Fonts -->
		<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,300i" rel="stylesheet">

		<!-- Styles -->
		<link href="https://eorder.solariaresto.co.id/assets/css/core.min.css" rel="stylesheet">
		<link href="https://eorder.solariaresto.co.id/assets/css/app.min.css" rel="stylesheet">
		<link href="https://eorder.solariaresto.co.id/assets/css/style.min.css" rel="stylesheet">

		<!-- Favicons -->
		<link rel="apple-touch-icon" href="https://eorder.solariaresto.co.id/assets/img/apple-touch-icon.png">
		<link rel="icon" type="image/png" href="<?php echo base_url('assets/') ?>/img/logojud.png"/>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">	
		
		
		
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAssH94kOodra9mncIoHPEWbySo4Np0V-w" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="<?php echo base_url() ?>/assets/css/layout.css">
    <link rel="stylesheet" type="text/css" href="<?php echo base_url() ?>/assets/css/stylesheet.css">
    <link rel="stylesheet" type="text/css" href="<?php echo base_url() ?>/assets/css/easyui.css">
    <link rel="stylesheet" type="text/css" href="<?php echo base_url() ?>/assets/css/icon.css">
	<link rel="stylesheet" type="text/css" href="<?php echo base_url() ?>/assets/css/jquery-ui-1.css">
    <link rel="stylesheet" type="text/css" href="<?php echo base_url() ?>/assets/css/jquery_notification.css">
    <link rel="stylesheet" type="text/css" href="<?php echo base_url() ?>/assets/css/jquery.autocomplete.css"/>
    <link rel="stylesheet" type="text/css" href="<?php echo base_url() ?>/assets/css/jpaging.css">
    <link rel="stylesheet" type="text/css" href="<?php echo base_url() ?>/assets/css/ui.datepicker.css"/>
    <link rel="stylesheet" type="text/css" href="<?php echo base_url() ?>/assets/css/bootstrap.css"/>
	
	<script type="text/javascript" src="<?php echo base_url() ?>/assets/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="<?php echo base_url() ?>/assets/js/jquery-ui-1.8.20.custom.min.js"></script>
    <script type='text/javascript' src='<?php echo base_url() ?>/assets/js/jquery.paginate.js'></script>
    <script type="text/javascript" src="<?php echo base_url() ?>/assets/js/ui.core.js"></script>
    <script type='text/javascript' src="<?php echo base_url() ?>/assets/js/jquery.autocomplete.js"></script>
    <script type="text/javascript" src="<?php echo base_url() ?>/assets/js/ui.datepicker.js"></script>
    <script type="text/javascript" src="<?php echo base_url() ?>/assets/js/jquery.PrintArea.js"></script>
	<script type="text/javascript" src="<?php echo base_url() ?>/assets/js/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="<?php echo base_url() ?>/assets/js/clock.js"></script>
    <script type="text/javascript" src="<?php echo base_url() ?>/assets/js/jquery_notification_v.1.js"></script>
<script>
// variabel global marker
var marker;
  
function taruhMarker(peta, posisiTitik){
    
    if( marker ){
      // pindahkan marker
      marker.setPosition(posisiTitik);
    } else {
      // buat marker baru
      marker = new google.maps.Marker({
        position: posisiTitik,
        map: peta
      });
    }
  
     // isi nilai koordinat ke form
    document.getElementById("lat").value = posisiTitik.lat();
    document.getElementById("lng").value = posisiTitik.lng();
    
    
}
  
function initialize() {
  var propertiPeta = {
    center:new google.maps.LatLng(-7.8475973,112.0275949),
    zoom:15,
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  
  var peta = new google.maps.Map(document.getElementById("googleMap"), propertiPeta);
  
  // even listner ketika peta diklik
  google.maps.event.addListener(peta, 'click', function(event) {
    taruhMarker(this, event.latLng);
  });

}


// event jendela di-load  
google.maps.event.addDomListener(window, 'load', initialize);
  

</script>
 
			<style>

            body { 
                background-color: red;
                background-repeat: no-repeat;
                background-size: 100% 100%;
                background-position: right bottom; 
                
                font-size: 12px;
                font-weight: normal;
            }
</style>            
  
<style type="text/css">
			.hide{
				display: none;
			}
		</style>	
		
		
	</head>
	
	<body>
		<div style="margin-top: 20px;" >
			<div class="col-12 p-0" >
                <div id="gradient3" class="card card-shadowed px-20 py-30 w-400px mx-auto " style="overflow:auto;max-width: 100%">
                    <div class="text-center"><img src="http://enambelasapp.my.id/rest/assets/img/judnam.png" style="width: 96px;"></div>
                        <div  class="text-center" style="font-size:26px;color:white;font-family: Segoe UI, Arial, sans-serif;font-weight:bold;">
                            <span class="text-center mt-0 fa fa-map-marker"  ><b>  <?php echo $toko ?></b></span>
                        </div>
                        
                        <div id="gradient2" >
                            <form   class="form-type-material" method="POST" action="<?php echo base_url().'mobile/member/auth'?>"  id="form-login" data-provide="validation">
                                <div style="margin-top: 10px;">
                                    <h5 class="text-center mt-1" style="font-size:18px;color:red;font-family: Segoe UI, Arial, sans-serif;font-weight:bold;">Pilih Jenis Pesanan</h5>
                                </div>
                                <div  class="form-group text-center" style="border-radius: 15px">
                                    <div id="gradient2" class="btn-group">
                                        <a id="dinein" class="btn btn-purple" style="width: 90px; height: 35px;border-radius: 10px 0px 0px 10px;font-size:12px;color:red;font-family: Segoe UI, Arial, sans-serif;font-weight:bold;"><i class="fa fa-home"></i> Dine In</a>
                                        <a id="take"   class="btn btn-light" style="width: 105px; height: 35px;font-size:12px;color:red;font-family: Segoe UI, Arial, sans-serif;font-weight:bold;"><i class="fa fa-shopping-bag"></i>Take Away</a>
			                            <a id="do" class="btn btn-light" style="width: 75px; height: 35px;border-radius: 0px 10px 10px 0px;font-size:13px;color:red;font-family: Segoe UI, Arial, sans-serif;font-weight:bold;"><i class="fa fa-motorcycle"></i> DO</a>
                                    </div>
                                </div>
                                <div style="width: 250px; margin-left: 20px;">
                                <div class="form-group text-center">
                                    <div class="input-group">
                                        <div class="input-group-input">
                                            <input type="number"  class="form-control"  aria-describedby="basic-addon1" name="userphone"  id="userphone"  required >
                                            <label align='center'>No Handphone/Wa</label>
                                        </div>
                                    </div>
                                </div>
                                </div>
                                <div style="width: 250px; margin-left: 20px;">
                                <div class="form-group text-center">
                                    <div class="input-group">
                                        <div class="input-group-input">
                                            <input type="text" class="form-control" aria-describedby="basic-addon1" name="username" id="username" required>
                                            <label>Nama</label>
                                        </div>
                                    </div>
                                </div>
                                </div>
                                <div style="width: 250px; margin-left: 20px;">
                                <div class="form-group text-center mb-1 hide" id="alamat">
                                    <div class="input-group">
                                        <div class="input-group-input">
                                            <input type="text" class="form-control" aria-describedby="basic-addon1" name="alamat" id="alamat">
                                            <label>Alamat</label>
                                            <button type="button" id="open" class="fa fa-map-marker"  style="font-size:24px" data-toggle="modal" data-target="#myModal" ></button>
                                            <input style='width:80px' type="hidden" id="lat" name="lat">
                                            <input style='width:80px' type="hidden" id="lng" name="lng">  
                                        </div>
                                    </div>
                                </div>
                                </div>
                                <div align='center' class="form-group text-center pull-center">
                                    <button type="submit" class="btn btn-hover color-11 mt-2 pull-center"  style="width:150px;height:35px;">Submit</button>
                                    <input type="hidden" name="toko" value="<?php echo $kdtoko ?>">
                                    <input type="hidden" name="order_type" >
                                </div>
                            </form>
                            <div></div>
                            <div class="text-center" style="margin-bottom: 20px;">
                                 <a  href="https://www.instagram.com/miedjoedes/?hl=id"><img src="<?php echo base_url('assets/') ?>/img/ig.png" style="width: 35px;"></a>
                                 <a  href="https://www.facebook.com/miedjoedesdjoeranyapedes/"><img src="<?php echo base_url('assets/') ?>/img/fb.png" style="width: 35px;"></a>
                                 <a  href="#"><img src="<?php echo base_url('assets/') ?>/img/wa.png" style="width: 35px;"></a>
                            </div>
                            <div></div>
                        </div>
    <!---  
    <div class="divider">Or Sign In With</div>
    <div class="text-center">
      <a class="btn btn-block btn-facebook" href="#"><i class="fa fa-facebook"></i> Facebook</a>
      <a class="btn btn-block btn-google" href="#"><i class="fa fa-google"></i> Google</a>
    </div> -->
    		
  </div>
</div>
 <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">

        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Lokasi</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <!-- Modal body -->
        <div class="modal-body">
           <!-- show map here -->
            <div id="googleMap" style="width:100%;height:420px;"></div>
        </div>
        <form action="" method="post">
                <input style='width:100px' type="text" id="lat" name="lat" value="">
                <input style='width:100px' type="text" id="lng" name="lng" value="">
	            <input style='width:100px' type="text" id="alamat" name="alamat" value="">
	
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Simpan</button>
        </div>
</form>
      </div>
    </div>
  </div>

</div>

<script type="text/javascript">
  $('form').attr('autocomplete', 'off');
      $("ul.nav li.dropdown").hover(function(){$(this).find(".dropdown-menu").stop(!0,!0).delay(100).fadeIn(500)},function(){$(this).find(".dropdown-menu").stop(!0,!0).delay(100).fadeOut(500)});
      var pesan="<?php echo $this->session->flashdata('msg'); ?>",error="<?php echo $this->session->flashdata('error'); ?>";pesan?(toastr.options={positionClass:"toast-top-right"},toastr.success(pesan)):error&&swal(error);


  function validateNumber(evt) {
    var theEvent = evt || window.event;

    // Handle paste
    if (theEvent.type === 'paste') {
      key = event.clipboardData.getData('text/plain');
    } else {
    // Handle key press
      var key = theEvent.keyCode || theEvent.which;
      key = String.fromCharCode(key);
    }
    var regex = /[0-9]|\./;
    if(!((theEvent.keyCode == 65 || theEvent.keyCode == 86 || theEvent.keyCode == 67) && (theEvent.ctrlKey === true || theEvent.metaKey === true))
      && theEvent.keyCode !== 8 
      && theEvent.keyCode !== 46 
      && (!regex.test(key) || (theEvent.target.value.length == 0 && theEvent.which == 48))) {
      theEvent.returnValue = false;
      if(theEvent.preventDefault) theEvent.preventDefault();
    }
  }

  $(document).ready(function(){
    /*$('[name=userphone]').focus();*/
    $('#dinein').click(function(){
      $('[name=username]').blur();
      $('[name=userphone]').focus();
      $('[name=username]').attr('required', 'required');
      $('[name=userphone]').attr('required', 'required');
      $('#dinein').addClass('btn-purple');
      $('#dinein').addClass('text-white');
      $('#take').removeClass('btn-purple');
      $('#take').removeClass('text-white');
      $('#do').removeClass('btn-purple');
      $('#do').removeClass('text-white');
      $('[name=order_type]').val('1');
    });
    $('#take').click(function(){
      $('[name=username]').blur();
      $('[name=userphone]').focus();
      $('[name=username]').attr('required', 'required');
      $('[name=userphone]').attr('required', 'required');
      $('#dinein').removeClass('btn-purple');
      $('#dinein').removeClass('text-white');
      $('#take').addClass('btn-purple');
      $('#take').addClass('text-white');
      $('#do').removeClass('btn-purple');
      $('#do').removeClass('text-white');
      $('[name=order_type]').val('2');
    });    
     $('#do').click(function(){
      $('[name=username]').blur();
      $('[name=userphone]').focus();
      $('[name=alamat]').blur();
      $('[name=userphone]').attr('required', 'required');
      $('[name=username]').attr('required', 'required');
      $('[name=alamat]').attr('required', 'required');
      $('#dinein').removeClass('btn-purple');
      $('#dinein').removeClass('text-white');
      $('#take').removeClass('btn-purple');
      $('#take').removeClass('text-white');
      $('#do').addClass('btn-purple');
      $('#do').addClass('text-white');
      $('[name=order_type]').val('3');
    });  

    $('#form-login').submit(function(e){
      if (
        $('[name=order_type]').val() == '1' 
        && $('#form-login [name="username"]').val() != '' 
        && $('#form-login [name="userphone"]').val() != '' 
      
      ){
        $('#form-login [name="username"]').closest('.form-group').remove();
       
    }
    
     else if (
        $('[name=order_type]').val() == '2' 
        && $('#form-login [name="username"]').val() != '' 
        && $('#form-login [name="userphone"]').val() != '' 
      
      ){
        $('#form-login [name="username"]').closest('.form-group').remove();
       
    }
    
   else if(
        $('[name=order_type]').val() == '3' 
        && $('#form-login [name="username"]').val() != '' 
        && $('#form-login [name="userphone"]').val() != '' 
         && $('#form-login [name="alamat"]').val() != '' 
         
      ){
         $('#form-login [name="username"]').closest('.form-group').remove();
       
      }
      return true;
    });
    
  });
  function createItem() {
  localStorage.kedai = '$toko';
}
</script>		
	
   
    <!-- Scripts -->
    <script src="https://eorder.solariaresto.co.id/assets/js/core.min.js"></script>
    <script src="https://eorder.solariaresto.co.id/assets/js/app.min.js"></script>
    <script src="https://eorder.solariaresto.co.id/assets/js/script.min.js"></script>
    <script type="text/javascript">
      $("#take").click(function(){
          $("#username").removeClass('hide');
          $("#userphone").removeClass('hide');
          $("#alamat").addClass('hide');
      });
      $("#dinein").click(function(){
          $("#username").removeClass('hide');
          $("#userphone").removeClass('hide');
          $("#alamat").addClass('hide');
          
      });
      $("#do").click(function(){
          $("#username").removeClass('hide');
          $("#userphone").removeClass('hide');
          $("#alamat").removeClass('hide');
      });
    </script>
     
        <script type="text/javascript">
            function isi_otomatis(){
                var nim = $("#userphone").val();
                $.ajax({
                    url: "<?php echo base_url().'mobile/member/get_detail_plg'?>",
                    data:"nim="+nim ,
                }).success(function (data) {
                    var json = data,
                    obj = JSON.parse(json);
                    $('#username').val(obj.nama);
                    $('#alamat').val(obj.alamat);
                    $('#lat').val(obj.lat);
                    $('#lng').val(obj.lng);
                });
            }
        </script>
  	 
<style>
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.buttons {
    margin: 10%;
    text-align: center;
}

.btn-hover {
    width: 80px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    margin: 5px;
    height: 55px;
    text-align:center;
    border: none;
    background-size: 300% 100%;

    border-radius: 25px;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.btn-hover:hover {
    background-position: 100% 0;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.btn-hover:focus {
    outline: none;
}
.btn-purple {
     background-image: linear-gradient(to right, #eb3941, #f15e64, #e14e53, #e2373f); 
     box-shadow: 0 5px 15px rgba(242, 97, 103, .4);
     border-radius: 15px;
     
}

.btn-hover.color-1 {
    background-image: linear-gradient(to right, #25aae1, #40e495, #30dd8a, #2bb673);
    box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
}
.btn-hover.color-2 {
    background-image: linear-gradient(to right, #f5ce62, #e43603, #fa7199, #e85a19);
    box-shadow: 0 4px 15px 0 rgba(229, 66, 10, 0.75);
}
.btn-hover.color-3 {
    background-image: linear-gradient(to right, #667eea, #764ba2, #6B8DD6, #8E37D7);
    box-shadow: 0 4px 15px 0 rgba(116, 79, 168, 0.75);
}
.btn-hover.color-4 {
    background-image: linear-gradient(to right, #fc6076, #ff9a44, #ef9d43, #e75516);
    box-shadow: 0 4px 15px 0 rgba(252, 104, 110, 0.75);
}
.btn-hover.color-5 {
    background-image: linear-gradient(to right, #0ba360, #3cba92, #30dd8a, #2bb673);
    box-shadow: 0 4px 15px 0 rgba(23, 168, 108, 0.75);
}
.btn-hover.color-6 {
    background-image: linear-gradient(to right, #009245, #FCEE21, #00A8C5, #D9E021);
    box-shadow: 0 4px 15px 0 rgba(83, 176, 57, 0.75);
}
.btn-hover.color-7 {
    background-image: linear-gradient(to right, #6253e1, #852D91, #A3A1FF, #F24645);
    box-shadow: 0 4px 15px 0 rgba(126, 52, 161, 0.75);
}
.btn-hover.color-8 {
    background-image: linear-gradient(to right, #29323c, #485563, #2b5876, #4e4376);
    box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75);
}
.btn-hover.color-9 {
    background-image: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
    box-shadow: 0 4px 15px 0 rgba(65, 132, 234, 0.75);
}
.btn-hover.color-10 {
        background-image: linear-gradient(to right, #ed6ea0, #ec8c69, #f7186a , #FBB03B);
    box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);
}
.btn-hover.color-11 {
       background-image: linear-gradient(to right, #eb3941, #f15e64, #e14e53, #e2373f);  box-shadow: 0 5px 15px rgba(242, 97, 103, .4);
}
.btn-ig {
    background-image:  linear-gradient(#f39c12,#FF00FF,#9400D3,#FF4500);
    border-radius: 5px;
}
.btn-fb {
    background-image: linear-gradient(to right, #2980b9, #0000FF);
    border-radius: 5px;
}
.btn-wa {
    background-image: linear-gradient(to right,#00FF00,#7FFF00);
    border-radius: 5px;
}

</style>	 
<style>
.container {
  position: relative;
  text-align: center;
  color: white;
}

.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}

.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
      
<style type="text/css">
	#gradient2 {
	  background-image: linear-gradient(to right, #F8F8FF, #F0F8FF,#F0FFFF);
      border-radius: 15px;
      box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.65);
      border: 3px solid red;
     
}
	
	#gradient3 {
	background: url("https://enambelasapp.my.id/simaset/assets/img/bgu.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
	  
	  border-radius: 15px;
      box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.65);
	}
	#warna {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
        filter: grayscale(100%);
    }
    .centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

</style>
  </body>
</html>