<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
		<meta name="keywords" content="Djoedes by enambelasapp.my.id">
		<meta name="author" content="Suroto">
		<meta name="description" content="Djoedes by enambelasapp.my.id">
		<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes" />

		<title>eOrder Mie Djoedes</title>
		<link href="<?php echo base_url().'assets/img/logo.png'?>" rel="shortcut icon" type="image/x-icon">
		<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">

		<!-- Favicons -->
		<link rel="apple-touch-icon" href="https://eorder.solariaresto.co.id/assets/img/apple-touch-icon.png">
		<link rel="icon" href="https://eorder.solariaresto.co.id/assets/img/favicon.png">
        <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css'>
        <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css'>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">	
		
		<!--  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>

            body { 
                 background-image: linear-gradient(red,red, yellow);
                background-repeat: no-repeat;
                background-attachment: fixed;
                background-position: right bottom; 
                
                font-size: 12px;
                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>
			<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 0px;
}

.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>

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

.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>  		
	<style type="text/css">
::-webkit-scrollbar {
    display: none;
}

#scroller{
  overflow-y: hidden;
  overflow-x: hidden;
}
#scroller:hover{
  overflow-y: hidden;
  overflow-x: scroll;
  -ms-overflow-style: thin;
  scrollbar-width: thin;
}
.margin-bottom-50{
  margin-bottom: 50px;
}

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ 
  #scroller{
    overflow: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
  #scroller{
    overflow: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 
  #scroller{
    overflow: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}
/*.icon-label {
            position: relative;
            top: -18px !important;
            display: inline-block;
            float: none;
            margin: 0 0 0 -5px;
            vertical-align: top;
            font-size: 14px;
            font-weight: 400;
        }*/
</style>		
		
        <!-- placeholder loading like fb -->
        <link rel="stylesheet" type="text/css" href="https://eorder.solariaresto.co.id/assets/css/placeholder-loading.css">
        <script type="text/javascript" src="https://eorder.solariaresto.co.id/assets/js/jquery.min.js"></script>
	</head>

<body>
		<!-- Preloader -->
		<div class="preloader" id="ajax-preloader">
			<div class="spinner-dots">
				<span class="dot1 text-purple"></span>
				<span class="dot2"></span>
				<span class="dot3"></span>
			</div>
		</div>


		<!-- Topbar -->
		<header class="topbar">
            <div class="topbar-left">
                <a href="#" class="topbar-btn ajax d-none" id="btn-back" style="width:48px;">
                    <i class="ti-arrow-left fw-600 text-purple"></i>
                </a>
                <!--div class="topbar-divider"></div-->
                	
                <a href="https://enambelasapp.my.id/simaset" class="ajax topbar-btn ml-10" id="btn-home">
                    <img src="<?php echo base_url().'assets/img/logo.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> -->

            <div class="topbar-right">
				<ul class="topbar-btns non-searching">

                    <!-- Notifications -->
                    					<li class="dropdown d-md-block" style="width:48px;">
						<a href="https://eorder.solariaresto.co.id/history" class="topbar-btn ajax"><i class="ti-receipt text-purple"></i>
                        <span class="icon-label-history">Riwayat</span>
                        </a>
					</li>
                                        <li class="dropdown d-md-block" style=";width:48px">
                        <a href="https://eorder.solariaresto.co.id/cart/view" class="topbar-btn ajax text-default">
                            <i class="fa fa-shopping-cart text-purple"></i>
                            <!--<span class="badge badge-pill badge-purple badge-sm">6</span>-->
                            <span class="icon-label badge badge-sm badge-pill badge-danger" 
                                id="total-item-cart">0</span>
                            <span class="icon-label-order">Pesanan</span>
                        </a>
                    </li>
					<!-- END Notifications -->

                    <!--form class="lookup lookup-circle">
                        <input type="text" name="search">
                    </form-->

				</ul>
                <form class="lookup lookup-md text-left " style="width: 100%;display:block" onsubmit="return false;">
                    <input type="text" id="search-autocomplete" name="search" placeholder="Cari menu" style="width: 100%;display:block">
                </form>
			</div>
		</header>
		<!-- END Topbar -->


		<!-- Main container -->
		<main class="main-container">
			<div class="main-content" style="padding-top: 10px;">
                <div id="ajax-page-container">
                    <div id="scroller">
                        <ul class="nav nav-tabs nav-tabs-purple mb-0" style="font-size:13px;color:white;font-family: Segoe UI;font-weight:bold;width:max-content;">
                            <li class="nav-item" >
                                <a class="nav-link" id="tabAll" data-toggle="tab" style="font-size:13px;color:white;font-family: Segoe UI;font-weight:bold" href="#all">All</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link " data-toggle="tab" style="font-size:13px;color:white;font-family: Segoe UI;font-weight:bold" href="#tab-product-1">Mie Ori</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link " data-toggle="tab" style="font-size:13px;color:white;font-family: Segoe UI;font-weight:bold" href="makanan1">Ori+Topping</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link " data-toggle="tab" style="font-size:13px;color:white;font-family: Segoe UI;font-weight:bold" href="#tab-product-25">Gokil</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link " data-toggle="tab" style="font-size:13px;color:white;font-family: Segoe UI;font-weight:bold" href="#tab-product-24">Gokil+Topping</a>
                            </li>
                                <li class="nav-item">
                            <a class="nav-link " data-toggle="tab" style="font-size:13px;color:white;font-family: Segoe UI;font-weight:bold" href="#tab-product-14">Topping</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link " data-toggle="tab" style="font-size:13px;color:white;font-family: Segoe UI;font-weight:bold" href="#tab-product-60">Snack</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link " data-toggle="tab" style="font-size:13px;color:white;font-family: Segoe UI;font-weight:bold" href="#tab-product-61">Minuman</a>
                            </li>
                        </ul>
                    </div>
                </div>    
       
    <tbody style="background-color:red;border-radius:15px;">
  	   
                    <div id='tab-product-1' class="row" style="margin-top:2px">
                        <?php foreach ($data->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  >
                                <div class="img-thumbnail">
                                    <img src="<?php echo base_url().'/assets/images/'.$gambar;?>"   alt="..."  style="border-radius:10px 10px 0 0;">
                                    <div class="container">
                                        <table>
                                            <tr>
                                                <td  style="font-size:13px;font-family: Segoe UI;font-weight:bold" ><?php echo $nama;?></td>
                                            </tr>    
                                            <tr>
                                                <td class="current-price pull-left" style="font-size:13px;color:red;font-family: Segoe UI;font-weight:bold"><?php echo $harbar.'K';?></td>
                                            </tr>
                                            <tr class="flexbox flex-justified text-center">
                                                <td>
                                                    <a href="<?php echo base_url('mobile/menu/add_list_order/').'/'.$id ?>" style="text-decoration: none;display: inline-block; color: #313944; " class="ajax text-center">
                                                        <button class="btn btn-xs btn-square 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>
                                                    </a>
                                                </td>
                                                <td  class="text-center fw-500 total-cart-list">0
                                                    <input type="hidden" class="totalCartList" value="0">
                                                </td>
                                                <td>
                                                    <a href="<?php echo base_url('mobile/menu/add_list_order').'/'.$id  ?>" style="text-decoration: none;display: inline-block; color: #313944; " class="ajax text-center">
                                                    <button class="btn btn-xs btn-square  btn-plus-list" type="button" style="padding: 2px 3px 3px;border-radius: 1px;" data-productid="<?php echo $id ?>" data-soldout="0" ><i class="fa fa-plus"></i></button>
                                                    </a>
                                                </td>
                                            </tr>
                                        </table>  
                                    </div>    
                                </div>
                            </div>
                        </div>
                        <?php } ?>
                   
    </tbody>

<!-- <div class="modal modal-bottom fade" id="modal-detail-product" tabindex="-1">
  <div class="modal-dialog"></div>
</div> -->
<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: "<?php echo base_url('mobile/menu/add_list_order') ?>",
    //      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('Salah, 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://enambelasapp.my.id/simaset/mobile/menu/utama');

    //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-left">Copyright © 2020 <a href="#">Solaria</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>