<!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 kedai Djoedes">
		<meta name="keywords" content="Djoedes, Mie Juara, Djoedes App, Djoedes eorder">

		<title>eOrder Djoedes</title>

		<!-- Fonts -->
		<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,300i|Dosis:300,500" 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">
        <link href="https://eorder.solariaresto.co.id/assets/vendor/easyautocomplete/dist/easy-autocomplete.min.css" rel="stylesheet">
        <link rel="stylesheet" href="https://enambelasapp.my.id/simaset/assets/font-awesome/css/font-awesome.min.css">


		<!-- 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="https://enambelasapp.my.id/rest/assets/img/logojud.png"/>
		<script type='text/javascript' src="<?php echo base_url().'mobile/js/slider/camera.min.js'?>"></script> 
		
		<script>
			jQuery(function(){
				
				jQuery('#camera_wrap_4').camera({
					height: 'auto',
					loader: 'bar',
					pagination: false,
					thumbnails: false,
					hover: false,
					opacityOnGrid: false
				});

			});
		</script>

		<!--  Open Graph Tags -->
		<!-- <meta property="og:title" content="The Admin Template of 2018!">
		<meta property="og:description" content="TheAdmin is a responsive, professional, and multipurpose admin template powered with Bootstrap 4.">
		<meta property="og:image" content="http://thetheme.io/theadmin/https://eorder.solariaresto.co.id/assets/img/og-img.jpg">
		<meta property="og:url" content="http://thetheme.io/theadmin/"> -->
		<meta name="twitter:card" content="summary_large_image">
		<style>
tbody {
  box-sizing: border-box;
   
}

*, *:before, *:after {
  box-sizing: inherit;
  
}

.column {
  float: left;
  width: 33.3%;
  margin-bottom: 0px;
  padding: 0 5px;
 
}

@media screen and (max-width: 650px) {
  .column {
    width: 100%;
    display: block;
  }
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  
}

.container {
  padding: 0 16px;
}

.container::after, .row::after {
  content: "";
  clear: both;
  display: table;
}

.title {
  color: grey;
}

.button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
}

.button:hover {
  background-color: #555;
}
</style>
		
		
		<style>

            body { 
                background-image: url('assets/img/ornamen.png');
                background-repeat: no-repeat;
                background-attachment: fixed;
                background-position: right bottom; 
                background-color:#fff; 
                font-size: 14px;
                font-weight: normal;
            }

            .preloader{
                background-color: rgba(255, 255, 255, 0.3) !important;
            }

            .spinner-dots span {
                background-color: #e0cdad;
            }

            .topbar {
                height: 58px;
            }
            .topbar-btn {
                padding: 0px;
                min-width: 36px;
            }

            .topbar-btns {
                padding-left: 10px;
            }

            .topbar-right {
                width: 100%;
            }
			.topbar-search .form-control {
					height: 30px;
					line-height: 32px;
					background-color: #eee;;
					padding-left: 38px;
			}

			.topbar-search .lookup-placeholder {
					top:3px;
			}
			.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
					margin: 0 2px;
			}
			.swiper-pagination-outside .swiper-wrapper {
					padding-bottom: 15px;
			}
			/*.figure {
					box-shadow: 0px 2px 8px rgba(0,0,0,0.15);
					border-radius: 4px;
			}*/
            .figure {
                    box-shadow: 0px 2px 8px rgba(0,0,0,0.15);
                    border-radius: 15px;
            }
			.figure-img{
					border-radius: 10px;
                    margin-bottom: 0px;
                    border: 5px solid white;
                   
			}
			
			.figure-caption{
                    font-size: 15px;
					padding: 0px 0px 0px;
					color: #222;
			}

            .figure-caption-custom {
                color: #4d5259;
                font-weight: normal !important;
            }

            .easy-autocomplete {
                position: unset !important;
            }
            .easy-autocomplete input {
                border-style: hidden;
                border-width: 0;
                box-shadow: none;
                color: inherit;
                float: none;
                padding: 10px 36px;
                height: 32px;
            }

            .easy-autocomplete-container ul{
                position: fixed;
                width: 100%;
                height: 100%;
                left: 0;
                top: 72px;
                border-top:none;
            }

            .lookup input:focus {
                background-color: #ffffff;
            }

            .lookup input {
                font-size: 13px;
            }

            .easy-autocomplete-container ul li, .easy-autocomplete-container ul .eac-category {border-bottom: 1px solid rgba(77,82,89,0.07);
                font-size: 13px;
                color:#4d5259;
                padding: 10px 12px;
            }

            .easy-autocomplete-container ul li label{
                font-size: 15px;
                color:#b21b7a;
                margin-bottom: 0px;
            }

            .icon-label {
                position: relative;
                top: 15px !important;
                display: inline-block;
                float: none;
                margin: 0 0 0 -5px;
                vertical-align: top;
                font-size: 9px;
                font-weight: 400;
                padding-top:3px; padding-bottom: 3px;
            }

            .topbar{
                background: linear-gradient(#f3f1d8, #e0cdad);
                border-radius: 0px 0px 20px 20px;
                box-shadow: 0px 2px 2px rgba(0,0,0,0.17);
            }

            .alert-gold {
                color: #b21b7a;
                border-radius: 10px;
                background: linear-gradient(#f3f1d8, #e0cdad);
                box-shadow: 1px 3px 6px rgba(0,0,0,0.2);
            }

            .btn-gold {
                background: linear-gradient(#f3f1d8, #e0cdad);
                border-color: #e0cdad;
                color: #b21b7a;
                border-radius: 10px;
                box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
            }

            .btn-outline.btn-gold {
                color: #e0cdad;
                background: none;
                border-color: #e0cdad;
            }

            .btn-gold:active, .btn-red.active, .show > .btn-red.dropdown-toggle {
                background: linear-gradient(#f3f1d8, #e0cdad);
                border-color: #e0cdad;
                color: #b21b7a;
            }
            .btn-gold:hover {
                background: linear-gradient(#f3f1d8, #e0cdad);
                border-color: #e0cdad;
                color: #b21b7a;
            }
            .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
                color: #b21b7a;
                background: linear-gradient(#f3f1d8, #e0cdad);
                border-color: #ddd #ddd #fff;
            }
            .nav-tabs .nav-link {
                color:#555;
            }

            .btn-group-lg > .btn, .btn-lg {
                font-size: 16px;
                font-weight: 500;
            }
            .btn-red:active, .btn-red.active, .show > .btn-red.dropdown-toggle {
                background-color: #b21b7a;
                border-color: #b21b7a;
                color: #fff;
            }
            .btn-red:hover {
                background-color: #b21b7a;
                border-color: #b21b7a;
                color: #fff;
            }
            .icon-label-order {
                position: relative;
                top: 12px !important;
                display: inline-block;
                float: none;
                margin: 0 0 0 -42px;
                vertical-align: top;
                font-size: 9px;
                font-weight: 400;
                padding-top: 3px;
                padding-bottom: 3px;
                color: #b21b7a
            }
            .icon-label-history {
                position: relative;
                top: 12px !important;
                display: inline-block;
                float: none;
                margin: 0 0 0 -28px;
                vertical-align: top;
                font-size: 9px;
                font-weight: 400;
                padding-top: 3px;
                padding-bottom: 3px;
                color: #b21b7a
            }

            .fab-fixed {
                position: fixed;
                box-shadow: 0px -5px 20px rgba(0,0,0,0.14);
                padding: 8px 22px 20px;
                background-color: #fff;
                left :0px;
                right: 0px;
                bottom: 0px;
            }
		</style>
        <!-- placeholder loading like fb -->
       
	</head>

	<body class="o-page">

		<!-- Preloader -->
		<div class="preloader" id="ajax-preloader">
			<div class="spinner-dots">
				<span class="dot1 text-danger"></span>
				<span class="dot2"></span>
				<span class="dot3"></span>
			</div>
		</div>
        
<!---
		<!-- Topbar 
		<header class="topbar" style="margin-top: 10px;">
            <div class="topbar-left">
               
                <!--div class="topbar-divider"></div
                <a href="https://enambelasapp.my.id/simaset" class="ajax topbar-btn ml-10" id="btn-home">
                    <img src="https://enambelasapp.my.id/rest/assets/img/judnam.png" class="img-responsive" style="max-width: 64px;">
                </a>
            </div>

		<!--	<div class="topbar-center">
                <form class="lookup lookup-md mt-3 text-left" style="width: 100%;display:block" onsubmit="return false;">
                    <input type="text" id="search-autocomplete" name="search" placeholder="Apa menu pilihan anda?" style="width: 100%;display:block">
                </form>
            </div>  

           
		</header>
		<!-- END Topbar -->
		


		<!-- Main container -->
		<main class="main-container">
			<div class="main-content" style="padding-top: 5px;">
                <div id="ajax-page-container">
    				<!-- Main content -->
    				<style>

.modal-center .modal-dialog {
    margin: 0;
    width: 85%;
}

.ph-picture-6 {
  display: block;
}

.row-menu{
	flex-wrap: unset !important;
	height: 75px;
	overflow-y: hidden; 
}

.col-4{
    padding: 0px;
}
.col-3{
    padding: 0px;
}

.d-flex-center{
  display: flex;
  min-height: 53px;
  align-items: center;
  justify-content: center;
}

.figure-caption-custom{
  color: #4d5259;
  font-weight: bolder;
}
</style>
<!-- <div class="fab fab-fixed">
  <a href="https://eorder.solariaresto.co.id/cart/view" title="Show my cart" class="ajax btn btn-float btn-default">
    <i class="fa fa-shopping-basket" style="margin-left: 22px"></i>
    <span class="icon-label badge badge-pill badge-success" id="total-item-cart">0</span>
  </a>
</div> -->

<div class="row " style="margin:2;">
    
    <div class="col-lg-12 col-sm-12 col-xs-12">
       <div class="col-lg-12" style="background-color:#ed1b24;border-radius:10px;" >
			<div id="header">
				<div class="header-content"><a href="#menu" class="p-link-home"><i class="fa fa-bars"></i></a></div>
				<div class="text-center" ><img src="http://miedjoetek.com/eorder/assets/img/logodjoetek.png" style="width: 96px;"></div>
			</div>
                <div class="flexbox flex-justified text-center">
                    <figure class="figure" >
                        <figcaption style="width: 100%;margin-top:10px;font-size:20px;color:white;font-family: Segoe UI, Arial, sans-serif;font-weight:bold" class="figure-caption text-center figure-caption-custom p-0 "><b>PILIHAN MENU</b></figcaption>
                    </figure>
                </div>
                
        </div>
        <div class="col-6" style="margin-top:10px;" ></div>  
    </div>
    <div style="background-color:#ed1b24;border-radius:15px;width: 100%;margin-left:0px;" class="row text-center">
        <div class="col-6" style="margin-top:10px;" >
            <div class="flexbox flex-justified text-center">
                <a href="<?php echo base_url('mobile/menu/makanan/') ?>" style="text-decoration: none;display: inline-block; color: #313944; " class="ajax text-center">
                    <figure class="figure">
                        <img src="https://enambelasapp.my.id/rest/gambar/9a10.jpg" class="figure-img img-fluid" alt="...">
                        <figcaption class="figure-caption text-center figure-caption-custom p-0 " style="font-size:20px;color:white;font-family: Segoe UI;font-weight:bold"><b>Mie Ori</b></figcaption>
                    </figure>
                </a>
            </div>
        </div>
        <div class="col-6" style="margin-top:10px;">
            <div class="flexbox flex-justified text-center">
                <a href="<?php echo base_url('mobile/menu/makanana/') ?>" style="text-decoration: none;display: inline-block; color: #313944; " class="ajax text-center">
                    <figure class="figure">
                        <img src="https://enambelasapp.my.id/rest/gambar/9a20.jpg" class="figure-img img-fluid" alt="...">
                        <figcaption class="figure-caption text-center figure-caption-custom p-0 " style="font-size:15px;color:white;font-family: Segoe UI, Arial, sans-serif;font-weight:bold">Mie Ori Topping</figcaption>
                    </figure>
                </a>
            </div>
        </div>
        <div class="col-6" style="margin-top:10px;">
            <div class="flexbox flex-justified text-center">
                <a href="<?php echo base_url('mobile/menu/makanan1/') ?>"  style="text-decoration: none;display: inline-block; color: #313944; " class="ajax text-center">
                    <figure class="figure">
                        <img src="https://enambelasapp.my.id/rest/gambar/9a18.jpg" class="figure-img img-fluid" alt="...">
                        <figcaption class="figure-caption text-center figure-caption-custom p-0 " style="font-size:15px;color:white;font-family: Segoe UI, Arial, sans-serif;font-weight:bold">Mie Gokill</figcaption>
                    </figure>
                </a>
            </div>
        </div>
        <div class="col-6">
            <div class="flexbox flex-justified text-center">
                <a href="<?php echo base_url('mobile/menu/makanan1a/') ?>"  style="text-decoration: none;display: inline-block; color: #313944; " class="ajax text-center">
                    <figure class="figure">
                        <img src="https://enambelasapp.my.id/rest/gambar/9a28.jpg" class="figure-img img-fluid" alt="...">
                        <figcaption class="figure-caption text-center figure-caption-custom p-0 " style="font-size:15px;color:white;font-family: Segoe UI, Arial, sans-serif;font-weight:bold">Mie Gokill Topping</figcaption>
                    </figure>
                </a>
            </div>
        </div>
        <div class="col-6">
            <div class="flexbox flex-justified text-center">
                <a href="<?php echo base_url('mobile/menu/makanan3/') ?>"  style="text-decoration: none;display: inline-block; color: #313944; " class="ajax text-center">
                    <figure class="figure">
                        <img src="https://enambelasapp.my.id/rest/gambar/9b10.jpg" class="figure-img img-fluid" alt="...">
                        <figcaption class="figure-caption text-center figure-caption-custom p-0 " style="font-size:15px;color:white;font-family: Segoe UI, Arial, sans-serif;font-weight:bold">Snack</figcaption>
                    </figure>
                </a>
            </div>
        </div>
        <div class="col-6">
            <div class="flexbox flex-justified text-center">
                <a href="<?php echo base_url('mobile/menu/minuman/') ?>"  style="text-decoration: none;display: inline-block; color: #313944; " class="ajax text-center">
                    <figure class="figure">
                        <img src="https://enambelasapp.my.id/rest/gambar/9d62.jpg" class="figure-img img-fluid" alt="...">
                        <figcaption class="figure-caption text-center figure-caption-custom p-0 "style="font-size:15px;color:white;font-family: Segoe UI, Arial, sans-serif;font-weight:bold">Beverages</figcaption>
                    </figure>
                </a>
            </div>
        </div>
    </div> 
    
</div>

<!-- generate menu -->
<!-- /end generate menu -->

<tbody>
    <figcaption class="figure-caption text-center" style="margin-top:5px;font-size:15px;color:red;font-family: Segoe UI, Arial, sans-serif;font-weight:bold">Menu Populer</figcaption>    
    <div class="row" style="margin-top:2px">
        <?php
        foreach ($popular->result_array() as $a) {
            $id=$a['menu_id'];
			$nama=$a['menu_nama'];	
			$deskripsi=$a['menu_deskripsi'];
			$harga_lama=$a['menu_harga_lama'];
			$harga_baru=$a['menu_harga_baru'];
			$harlam=$a['harga_lama'];
			$harbar=$a['harga_baru'];
			$like=$a['menu_likes'];
			$kat_id=$a['menu_kategori_id'];
			$kat_nama=$a['menu_kategori_nama'];
			$gambar=$a['menu_gambar'];
        ?>
        
        <div class="col-4">      
            <div class="column">
                <div class="card">
                    <img src="<?php echo base_url().'/assets/images/'.$gambar;?>"   alt="..." style="width:100%;height:100px;border-radius:10px 10px 0 0;">
                    <div class="container">
                        <div>
                            <span align='left'><?php echo $nama;?></span>
                            <span class="current-price pull-right" style="font-size:12px;color:red;font-family: Segoe UI;font-weight:bold"><?php echo $harbar.'K';?></span>
                        
                        </div>
                        <p>
                        <div class="flexbox">
                            <span>
                                <center>
                                    <button class="btn btn-xs btn-square btn-gold btn-minus-list" type="button" style="padding: 3px 5px 5px;border-radius: 3px;" data-productid="<?php echo $id ?>" data-soldout="0"><i class="fa fa-minus"></i></button>
                                </center>
                            </span>
                            <span>
                                <center><h5 class="text-center fw-500 total-cart-list">0</h5></center>
                                <input type="hidden" class="totalCartList" value="0">
                            </span>
                            <span>
                                <center>
                                    <button class="btn btn-xs btn-square btn-gold btn-plus-list" type="button" style="padding: 3px 5px 5px;border-radius: 3px;" data-productid="<?php echo $id ?>" data-soldout="0" ><i class="fa fa-plus"></i></button>
                                </center>
                            </span>
                        </div>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <?php } ?>
    </div>  <!-- .fluid_container -->
</tbody>


				<!-- <a href="#" class="home-footer">
					About us
				</a> -->
			
<!-- <div class="modal fade" id="modal-detail-product" tabindex="-1">
  <div class="modal-dialog"></div>
</div> -->
<script type="text/javascript">
  $(document).ready(function(){
  //   $("input[name=search]").off();
  //   var options = {
  //     url: function(phrase) {
  //         return "https://eorder.solariaresto.co.id/product/search/";
  //     },
  //     getValue: "name",
  //     ajaxSettings: {
  //       dataType: "json",
  //       method: "POST",
  //       data: {
  //         dataType: "json"
  //       }
  //     },
  //     template: {
  //       type: "custom",
  //       method: function(value, item) {
  //           return '<b>'+item.epName+'</b> <br>'+item.eppgPrice;
  //       }
  //     },
  //     list: {
  //       onClickEvent: function() {
  //         var value = $("input[name=search]").getSelectedItemData();
  //         if (value.epId.length) showProduct(value.epId);
  //       },
  //       onKeyEnterEvent: function(){
  //         return false;
  //       }
  //     },
  //     preparePostData: function(data, inputPhrase) {
  //       data.phrase = $("#search-autocomplete").val();
  //       return data;
  //     },
  //     requestDelay: 400
  //   };
  //   $("#search-autocomplete").easyAutocomplete(options);

  //   function showProduct(epId){
  //     showLoader();
  //     // console.log(epId);
  //     $.ajax({
  //       type : 'post',
  //       url : 'https://eorder.solariaresto.co.id/product/detail/'+epId+'?ascomponent=1',
  //       dataType : 'html',
  //       success: function(contentHtml){
  //         $('#modal-detail-product .modal-dialog').html(contentHtml).promise().then(function(){
  //           hideLoader();
  //           $('#modal-detail-product').modal('show');
  //         });
  //       }, 
  //       error: function(){
  //         hideLoader();
  //       }
  //     });
  //   }

    $('.link-product').off('click').click(function(e){
      var epId = $(this).data('productid');
      showProduct(epId);
    });

    
    $('#btn-home').removeClass('d-none');
    $('.text-search').addClass('d-none');
    $('#btn-back').addClass('ajax d-none').removeAttr('onclick');
      
  });

  var anonim_user = 'anonim__62b1995a1919a1.24493094';
  if (anonim_user != ''){
    localStorage.setItem('solaria_anonim_user', anonim_user);
  }
</script>

<script type="text/javascript">
  var isBusy = false;
  $(document).ready(function(){
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
    if(0 > 0){
        $("#button-show-cart").show();
    }else{
        $("#button-show-cart").css("display", "none");
    }
    $('#tabAll').on('click',function(e){
      e.preventDefault();
      $('#tabAll').parent().addClass('active');  
      $('.tab-pane').addClass('active in show');  
      $('[data-toggle="tab"]').parent().removeClass('active');
    });

    // $('.nav-link:not(.active):not(#tabAll)').click(function(e){
    $('#scroller .nav-link:not(#tabAll)').click(function(e){
      $('.tab-pane').removeClass('active in show');
      $('.btn-next').addClass('d-none');
      return true;
    });

    $('#scroller #tabAll').click(function(e){
      $('.btn-next').removeClass('d-none');
    });

    if ($('#scroller .nav-link.active').length == 0) $('#tabAll').click();

    $('#scroller .nav-link').click(function(e){
      $($(this).attr('href')).addClass('active in show');
    });

    $('#scroller .nav-link').click(function(){
      var lastChar = location.href.substr(location.href.length - 1);
      var locationHref = location.href;
      var lastSegmentLink = locationHref.substring(locationHref.lastIndexOf('/') + 1);
      var newlink = '';
      var href = $(this).attr('href').substring($(this).attr('href').lastIndexOf("-") + 1);

      if (lastSegmentLink == 'view' && lastChar != '/'){
        newlink = locationHref + '/' + href;
      }else if (lastSegmentLink == 'view' && lastChar == '/'){
        newlink = locationHref + href;
      }else if (lastSegmentLink == ''){
        newlink = locationHref + href;
      }else if ($(this).attr('href') == '#all'){
        newlink = locationHref.replace(lastSegmentLink, '');
      }else{
        newlink = locationHref.replace(lastSegmentLink, href);
      }
      
      history.replaceState({}, $('head title').html(), newlink);
      $('')
    });

    function initBtn(){
      $('.tab-pane .btn-next').off('click').click(function(){
        var catId = $(this).data('catid');
        var page = $(this).data('nextpage');
        loadProduct(catId, page, function(){
          $('.tab-pane .btn-next[data-catid="'+catId+'"]').removeClass('d-none');
        });
      });

      $('.link-product').off('click').click(function(e){
        showLoader();
        var epId = $(this).data('productid');
        // console.log(epId);
        $.ajax({
          type : 'post',
          url : 'https://eorder.solariaresto.co.id/product/detail/'+epId+'?ascomponent=1',
          dataType : 'html',
          success: function(contentHtml){
            $('#modal-detail-product .modal-dialog').html(contentHtml).promise().then(function(){
              hideLoader();
              $('#modal-detail-product').modal('show');
            });
          }, 
          error: function(){
            hideLoader();
          }
        });
      });

      //submit plus minus button
      function submitProduct(epId, total, callbackSuccess, callbackError){
        showLoader();
        $.ajax({
          type: 'post',
          url: 'https://eorder.solariaresto.co.id/cart/add',
          dataType: 'json',
          data: {
            totalCart : total,
            modifier : [],
            epId : epId,
            freetextmodifier : ''
          },
          success: function(r){
            if (r && r.status){
              $('#total-item-cart').html(r.total_item);
              $('#total-item-basket').html(r.total_item);
                if(r.total_item > 0){
                    $("#button-show-cart").show();
                }else{
                    $("#button-show-cart").css("display", "none");
                }
            }
            hideLoader();
            if (typeof callbackSuccess == 'function') callbackSuccess(r);
          },
          error: function(r){
            hideLoader();
            app.toast('Terjadi kesalahan, coba ulangi kembali');
            if (typeof callbackError == 'function') callbackError();
          }
        });
      }

      $('.btn-plus-list:not([data-soldout="1"])').off('click').click(function(e){
        e.preventDefault();
        var $this = $(this);
        var epId = $this.data('productid');
        $('.btn-plus-list, .btn-minus-list').attr('disabled', 'disabled');
        submitProduct(epId, '+1', function(r){
          $('.btn-plus-list:not([data-soldout="1"]), .btn-minus-list').removeAttr('disabled');
          $this.closest('.flexbox').find('.totalCartList').val(r.total_item_list);
          $this.closest('.flexbox').find('.total-cart-list').html(r.total_item_list);
        });
      });

      $('.btn-minus-list').off('click').click(function(e){
        e.preventDefault();
        var $this = $(this);
        var epId = $this.data('productid');
        $('.btn-plus-list, .btn-minus-list').attr('disabled', 'disabled');
        submitProduct(epId, '-1', function(r){
          $('.btn-plus-list:not([data-soldout="1"]), .btn-minus-list').removeAttr('disabled');
          $this.closest('.flexbox').find('.totalCartList').val(r.total_item_list);
          $this.closest('.flexbox').find('.total-cart-list').html(r.total_item_list);
        });
      });

    }

    initBtn();    

    function loadProduct(catId, page, callback){
      if (isBusy) return true;

      isBusy = true;
      showLoader();
      $.ajax({
        type : 'post',
        url : 'https://eorder.solariaresto.co.id/product/next?ascomponent=1',
        dataType : 'html',
        data : {
          catId : catId,
          page : page
        },
        success : function(contentHtml){
          $('.tab-pane.active .btn-next[data-catid="'+catId+'"]').replaceWith(contentHtml).promise().then(function(){
            hideLoader();
            isBusy = false;
            initBtn();
            if (typeof callback == 'function') callback();
          });
        },
        error : function(e){
          hideLoader();
          isBusy = false;
        }
      });
    }

    // $(window).endlessScroll({
    //   // pagesToKeep: 10,
    //   inflowPixels: 10,
    //   fireOnce: false,
    //   // fireDelay: false,
    //   fireDelay: 2000,
    //   content: function(i, p, d) {
    //     if (d == 'next' && $('#tabAll.active').length == 0 && $('.tab-pane.active .btn-next').length && isBusy == false){
    //       // console.log(i, p, d);
    //       var catId = $('.tab-pane.active .btn-next').data('catid');
    //       var page = $('.tab-pane.active .btn-next').data('nextpage');
    //       loadProduct(catId, page);

    //     }
    //   },
    //   // ceaseFire: function(fireSequence, pageSequence, scrollDirection){
    //   //   if (fireSequence >= 10) {
    //   //     return true;
    //   //   }
    //   // }
    // });

    //Infinite scroll
    $(window).off('scroll').on("scroll", function() {
      var scrollHeight = $(document).height();
      var scrollPos = $(window).height() + $(window).scrollTop();
      // console.log(scrollHeight+' - '+scrollPos+' = '+(scrollHeight - scrollPos));
      if ((scrollHeight - scrollPos) <= 100 && $('#tabAll.active').length == 0 && $('.tab-pane.active .btn-next').length && isBusy == false){
        var catId = $('.tab-pane.active .btn-next').data('catid');
        var page = $('.tab-pane.active .btn-next').data('nextpage');
        loadProduct(catId, page);
      }
    });

    //navigation btn
    $('#btn-home').addClass('d-none');
    $('.text-search').removeClass('d-none');
    $('#btn-back').removeClass('d-none').off('click').attr('href', 'https://eorder.solariaresto.co.id/home');

    //auto scroll to active tab
    if ($('#scroller .nav-link.active').position() !== undefined){
      $('#scroller').animate({
        scrollLeft : 0
      }, {
        complete: function() {
          $('#scroller').animate({
            scrollLeft : $('#tabAll.active').length == 0 ? $('#scroller .nav-link.active').position().left - 100 : $('#scroller .nav-link.active').position().left - 15
          });
        }
      });
    }

  });
</script>   

    				<!-- END Main content -->
                </div>
			</div><!--/.main-content -->

            <div class="modal modal-bottom fade" id="modal-detail-product" tabindex="-1">
              <div class="modal-dialog"></div>
            </div>

			<!-- Footer -->
			<footer class="site-footer">
				<div class="row">
					<div class="col-md-12">
						<p class="text-center text-md-center">Copyright © <?php echo date('Y')?> <a href="#">Mandiri</a>. All rights reserved.</p>
					</div>
				</div>
			</footer>
			<!-- END Footer -->

		</main>
		<!-- END Main container -->

        <!-- 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" src="https://eorder.solariaresto.co.id/assets/plugin/endless-scroll/jquery.endless-scroll.js"></script>
		<script type="text/javascript">
		initAjaxClick();
        

      function beforeAjaxLoadInit(){
        // remove all event delete
        $(document).unbind('click', 'a.btn-delete');
        $(document).off('click', 'a.btn-delete');
      }

      function showLoader(){
        $('#ajax-preloader').fadeIn('slow');
        $('.modal').modal('hide');
      }

      function hideLoader(){
        $('#ajax-preloader').fadeOut('fast');
      }

      function clickAjax(selector, type){
        var $this = selector;
        var classes = $this.attr('class').split(' ');
        var destContainer = 'ajax-page-container';
        var $destContainer = $('#ajax-page-container');
        var link = $this.attr('href');
        var originalLink = $this.attr('href');
        $this.unbind('click');

        if ($this.attr('href').indexOf('ascomponent') < 0 && $this.attr('href').indexOf('?') < 0){
            link += '?ascomponent=1';
        }else
        if ($this.attr('href').indexOf('ascomponent') < 0){
            link += '&ascomponent=1';
        }

        var _html = '<div id=\"'+destContainer+'\">\n';

        // show preloader
        showLoader();

        $.ajax({
            url : link,
            type : 'GET',
            dataType : type,
            success : function(htmlResponse){
                // hide preloader
                hideLoader();
                beforeAjaxLoadInit();

                if (type != 'json' && htmlResponse.indexOf('{') == 0){
                    htmlResponse = JSON.parse(htmlResponse);
                    $.get(htmlResponse.url, {}, function(resp){
                        _html += resp+'\n';
                        _html += '</div>';
                        $destContainer.replaceWith(_html).promise().done(function(){
                            var _url = htmlResponse.url.replace('?ascomponent=1', '');
                            _url = _url.replace('&ascomponent=1', '');
                            history.pushState({}, $('head title').html(), _url);
                        });
                    });
                }else
                if (type == 'json' && htmlResponse.url){
                    $.get(htmlResponse.url, {}, function(resp){
                        _html += resp+'\n';
                        _html += '</div>';
                        $destContainer.replaceWith(_html).promise().done(function(){});
                    });
                }else{
                    _html += htmlResponse+'\n';
                    _html += '</div>';
                    $destContainer.replaceWith(_html).promise().done(function(){
                        // $('html, body').animate({
                        //     scrollTop: $(destContainer).offset().top - 100
                        // }, 0);
                        // init_altair();
                    });
                    history.pushState({}, $('head title').html(), originalLink);
                }
            },
            error : function(err, htmlResponse){
                // hide preloader
                hideLoader();
                beforeAjaxLoadInit();
                // $(destContainer).html(htmlResponse);
                _html += htmlResponse+'\n';
                _html += '</div>';
                $destContainer.replaceWith(_html).promise().done(function(){
                    // $('html, body').animate({
                    //     scrollTop: $(destContainer).offset().top - 100
                    // }, 0);
                    // init_altair();
                });
                history.pushState({}, $('head title').html(), originalLink);
            }
        });

        $(".dropdown").removeClass('show');
        $(".dropdown-menu").removeClass('show');
        $(".topbar-btn").attr("aria-expanded",  "false"); 
      }

      function submitAjax(selector){
        var $this = selector;
        var classes = $this.attr('class').split(' ');
        var destContainer = 'ajax-page-container';
        var $destContainer = $('#ajax-page-container');
        var link = $this.attr('action');
        var originalLink = $this.attr('action');

        if ($this.attr('action').indexOf('ascomponent') < 0 && $this.attr('action').indexOf('?') < 0){
            link += '?ascomponent=1';
        }else
        if ($this.attr('action').indexOf('ascomponent') < 0){
            link += '&ascomponent=1';
        }

        var _html = '<div id=\"'+destContainer+'\">\n';

        // check validator
        if ($this.find('.is-invalid').length > 0){
            return false;
        }
        // show preloader
        showLoader();
        $.ajax({
            url : link,
            type : $this.attr('method'),
            data : $this.serialize(),
            dataType : 'html',
            success : function(response){
                // hide preloader
                hideLoader();
                // remove all event delete
                beforeAjaxLoadInit();

                if (response.indexOf('{') == 0){
                    var jsonResponse = JSON.parse(response);
                    if (jsonResponse.exec) eval(jsonResponse.exec);

                    if (jsonResponse.url){
                        $.get(jsonResponse.url, {}, function(resp){
                            _html += resp+'\n';
                            _html += '</div>';
                            $destContainer.replaceWith(_html).promise().done(function(){
                                // $('html, body').animate({
                                //     scrollTop: $(destContainer).offset().top - 100
                                // }, 0);
                            });
                            var _url = jsonResponse.url.replace('?ascomponent=1', '');
                            history.pushState({}, $('head title').html(), _url);
                        });
                    }
                }else{
                    _html += response+'\n';
                    _html += '</div>';
                    $destContainer.replaceWith(_html).promise().done(function(){
                        // $('html, body').animate({
                        //     scrollTop: $destContainer.offset().top - 100
                        // }, 0);
                    });
                }
            },
            error : function(err, htmlResponse){
                // hide preloader
                hideLoader();
                // altair_helpers.content_preloader_hide();
                $destContainer.html(htmlResponse);
            }
        });
      }

      function submitAjaxFormUpload(selector){
        var $this = selector;
        var classes = $this.attr('class').split(' ');
        var destContainer = 'ajax-page-container';
        var $destContainer = $('#ajax-page-container');
        var link = $this.attr('action');
        var originalLink = $this.attr('action');
        var data = new FormData($this[0]);
        /*append file*/
        $this.find('[type=file]').each((i, v)=>{
            if ($(v)[0].hasOwnProperty('file')){
                data.append($(v).attr('name'), $(v)[0].file);
            }
        });

        if ($this.attr('action').indexOf('ascomponent') < 0 && $this.attr('action').indexOf('?') < 0){
            link += '?ascomponent=1';
        }else
        if ($this.attr('action').indexOf('ascomponent') < 0){
            link += '&ascomponent=1';
        }

        var _html = '<div id=\"'+destContainer+'\">\n';

        // check validator
        if ($this.find('.is-invalid').length > 0){
            return false;
        }
        // show preloader
        showLoader();
        $.ajax({
            url: link,
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            method: $this.attr('method'),
            type: $this.attr('method'), // For jQuery < 1.9
            success : function(response){
                // hide preloader
                hideLoader();
                // remove all event delete
                beforeAjaxLoadInit();

                if (response.indexOf('{') == 0){
                    var jsonResponse = JSON.parse(response);
                    if (jsonResponse.exec) eval(jsonResponse.exec);

                    if (jsonResponse.url){
                        $.get(jsonResponse.url, {}, function(resp){
                            _html += resp+'\n';
                            _html += '</div>';
                            $destContainer.replaceWith(_html).promise().done(function(){
                                // $('html, body').animate({
                                //     scrollTop: $(destContainer).offset().top - 100
                                // }, 0);
                            });
                            var _url = jsonResponse.url.replace('?ascomponent=1', '');
                            history.pushState({}, $('head title').html(), _url);
                        });
                    }
                }else{
                    _html += response+'\n';
                    _html += '</div>';
                    $destContainer.replaceWith(_html).promise().done(function(){
                        // $('html, body').animate({
                        //     scrollTop: $destContainer.offset().top - 100
                        // }, 0);
                    });
                }
            },
            error : function(err, htmlResponse){
                // hide preloader
                hideLoader();
                // altair_helpers.content_preloader_hide();
                $destContainer.html(htmlResponse);
            }
        });
      }

      function initAjaxClick(){
        $('a.ajax').off('click');
        // $('form.ajax:not([enctype="multipart/form-data"])').off('submit');
        $('form.ajax').off('submit');

        $(document).on('click', 'a.ajax:not(.btn-delete)', function(e){
            // console.log('a clicked');
            e.preventDefault();
            e.stopImmediatePropagation();

            var $this = $(this);

            clickAjax($this, 'html');
            return false;
        });

        // $(document).on('submit','form.ajax:not([enctype="multipart/form-data"])', function(e){
        $(document).on('submit','form.ajax', function(e){
            // console.log('form submitted');
            e.preventDefault();
            e.stopImmediatePropagation();
            var $this = $(this);
            var functions = [];
            if ($(this).attr('onsubmit') && $(this).attr('onsubmit') != ''){
                functions = $(this).attr('onsubmit').split(';');
            }
            if (functions.length){
                for (var i = 0; i < functions.length; i++) {
                    if (functions[i] == ''){
                        continue;
                    }
                    functions[i] = functions[i].replace('return ', '');
                    eval('var f = '+functions[i]+';');
                    if (f === false){
                        break;
                    }
                }
                if (f !== false){
                    if ($('.md-fab-wrapper').length){
                        $('.md-fab-wrapper').remove();
                    }
                    if ($this.attr('enctype') && $this.attr('enctype').toLowerCase() == "multipart/form-data"){
                        submitAjaxFormUpload($this);
                    }else{
                        submitAjax($this);
                    }
                }
            }else{
                if ($('.md-fab-wrapper').length){
                    $('.md-fab-wrapper').remove();
                }
                if ($this.attr('enctype') && $this.attr('enctype').toLowerCase() == "multipart/form-data"){
                    submitAjaxFormUpload($this);
                }else{
                    submitAjax($this);
                }
            }

            return false;
        });
      }

      window.onpopstate = function(event) {
        // console.log('history popped');
        // console.log(event.state);
        var link = document.location.href.replace(/\&_uniqid.*/,'');
        var originalLink = document.location.href;

        if (link.indexOf('ascomponent') < 0 && link.indexOf('?') < 0){
            link += '?ascomponent=1';
        }else
        if (link.indexOf('ascomponent') < 0){
            link += '&ascomponent=1';
        }

        if (originalLink.indexOf('#') !== (originalLink.length - 1)){
            // show preloader
            showLoader();
            $.ajax({
                url : link,
                type : 'GET',
                dataType : 'html',
                success : function(htmlResponse){
                    // hide preloader
                    hideLoader();
                    // altair_helpers.content_preloader_hide();
                    // remove all event delete
                    // beforeAjaxLoadInit();

                    var _html = '<div id="ajax-page-container">\n';
                        _html += htmlResponse+'\n';
                        _html += '</div>\n';
                    $('#ajax-page-container').replaceWith(_html).promise().done(function(){});
                },
                error : function(err, htmlResponse){
                    // hide preloader
                    hideLoader();
                    // altair_helpers.content_preloader_hide();

                    // remove all event delete
                    // beforeAjaxLoadInit();

                    var _html = '<div id="ajax-page-container">\n';
                        _html += htmlResponse+'\n';
                        _html += '</div>\n';
                    $('#ajax-page-container').replaceWith(_html).promise().done(function(){});
                }
            });
        }else{
            return false;
        }
      };

        window.onhashchange = function(event){
            var originalLink = document.location.href;
            if (originalLink.indexOf('#') === (originalLink.length - 1)){
                history.replaceState({}, $('head title').html(), originalLink.substring(0, (originalLink.length - 1)));
            }
        };
		</script>
        <script type="text/javascript">
            $(document).trigger('ready');
        </script>
        <script type="text/javascript" src="https://eorder.solariaresto.co.id/assets/vendor/easyautocomplete/dist/jquery.easy-autocomplete.js"></script>
        <script type="text/javascript">
            function showProduct(epId){
                showLoader();
                // console.log(epId);
                var backto = location.href.indexOf('/cart/view') >= 0 ? '&backto=cart' : '';
                $.ajax({
                    type : 'post',
                    url : 'https://eorder.solariaresto.co.id/product/detail/'+epId+'?ascomponent=1'+backto,
                    dataType : 'html',
                    success: function(contentHtml){
                      $('#modal-detail-product .modal-dialog').html(contentHtml).promise().then(function(){
                        hideLoader();
                        $('#modal-detail-product').modal('show');
                        $('.non-searching').removeClass('d-none');
                      });
                    }, 
                    error: function(){
                      hideLoader();
                      $('.non-searching').removeClass('d-none');
                    }
                });
            }
            $(document).ready(function(){
                $("input[name=search]").off();
                var options = {
                  url: function(phrase) {
                      return "https://eorder.solariaresto.co.id/product/search/";
                  },
                  getValue: "name",
                  adjustWidth: false,
                  ajaxSettings: {
                    dataType: "json",
                    method: "POST",
                    data: {
                      dataType: "json"
                    }
                  },
                  template: {
                    type: "custom",
                    method: function(value, item) {
                        return '<label>'+item.epName+'</label> <br>'+item.eppgPrice;
                    }
                  },
                  list: {
                    onClickEvent: function() {
                      var value = $("input[name=search]").getSelectedItemData();
                      if (value.epId != '') showProduct(value.epId);
                    },
                    onKeyEnterEvent: function(){
                      return false;
                    }
                  },
                  preparePostData: function(data, inputPhrase) {
                    data.phrase = $("#search-autocomplete").val();
                    return data;
                  },
                  requestDelay: 400
                };
                $("#search-autocomplete").easyAutocomplete(options).focus(function(){
                    $('.non-searching').addClass('d-none');
                }).blur(function(){
                    if (!$('#search-autocomplete').closest('.easy-autocomplete').find('.easy-autocomplete-container > ul[style*="display: block"]').length){
                        $('.non-searching').removeClass('d-none');
                    }                    
                });
            });
        </script>
	</body>
</html>