@include('ready_food.layouts.header_include')

<div id="myproduct" class="overlay">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times; <span>&nbsp;&nbsp;&nbsp;Product Detail</span></a>
    <div class="overlay-content">
        <section class="restaurant-section padding-no">
            <div class="restaurant-img">
                <img src="/images/restaurants/1737036580236073.jpg" class="img-fluid">
            </div>
            <div class="product-content">
                <div class="d-flex justify-content-between p-3">
                    <div class="product-heading"> 
                        <h4 class="font-weight-bold">Product Name</h4>
                    </div>
                    <div class="product-heading mt-2"> 
                        <h6 class="font-weight-bold ">Rs. <span>349.00</span> </h6>
                    </div>
                </div>
                <div class="product-detail">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                </div>
                <div class="product-detail-instructions">
                    <div>
                        {{-- <i class="uil uil-plus"></i><span>Add special instructions</span> --}}
                        <h6>Add special instructions</h6>
                        <textarea name="#" id="" rows="3" class="form-control"></textarea>
                    </div>
                </div>
                <div class="d-flex justify-content-between p-3">
                    <div>
                        <div class="input-group">
                            <span class="input-group-btn pr-2">
                                <button type="button" class="btn btn-dark btn-number"  data-type="minus" data-field="quant[2]">
                                <span class="glyphicon glyphicon-minus"><i class="uil uil-minus"></i></span>
                                </button>
                            </span>
                            <input type="text" name="quant[2]" class="input-number" value="1" min="1" max="100" class="">
                            <span class="input-group-btn pl-2">
                                <button type="button" class="btn btn-dark btn-number" data-type="plus" data-field="quant[2]">
                                    <span class="glyphicon glyphicon-plus"><i class="uil uil-plus"></i></span>
                                </button>
                            </span>
                        </div>
                    </div>
                    <div class="product-add-cart mt-2"> 
                        <a href="#">Add to cart</a>
                    </div>
                </div>
                
            </div>
        </section> 
    </div>
  </div>

<nav class="menu-page-nav">
  <div class="container">
    <div class="row">
      <div class="col-6 text-left">
        <a href="{{ route('all-restaurants') }}" class="angle-set">
          <i class="uil uil-angle-left"></i>
        </a>
      </div>
      <div class="col-6 text-right">
        <a href="#" class="angle-set">
          <i class="uil uil-upload"></i>
        </a>
      </div>
    </div>
  </div>
</nav>

<section class="restaurant-section">
    <div class="restaurant-img">
      <img src="/images/restaurants/1737036580236073.jpg" class="img-fluid">
    </div>
    <div class="container">
      <div class="row border-bottom">
        <div class="col-12">
          <div class="restaurant-content">
            <h3>Broadway Pizza -hyderabad</h3>
          </div>
          <div class="d-flex justify-content-between m-0 p-0">
            <div class="kilo-mtr">
              <p>3.3km away</p>
            </div>
            <div class="kilo-mtr pink">
              <a href="{{ route('single-restaurant-menu-info', ['id'=> $restaurant_id]) }}" class="font-weight-bold">More info</a>
            </div>
          </div>
          <div class="rating-content">
           <ul>
            <li><i class="uil uil-favorite"></i></li>
            <li><i class="uil uil-favorite"></i></li>
            <li><i class="uil uil-favorite"></i></li>
            <li><i class="uil uil-favorite"></i></li>
            <li><p>1000+ Rating</p></li>
           </ul>
          </div>
          <div class="d-flex justify-content-between m-0 p-0">
            <div class="delivery-tme">
              <p><i class="uil uil-clock"></i>Delivery 35 min</p>
            </div>
            <div class="kilo-mtr Darkgrey">
              <p>Change</p>
            </div>
          </div>
        </div>
        <div class="col-lg-12 food_menu">
            <div class="nav nav-tabs food_menu_nav" id="myTab" role="tablist">
                @foreach($singlerestaurantcategories as $singlerestaurantcategory)
                <a class="active" id="Special-tab" data-toggle="tab" href="#Special" role="tab" aria-controls="Special" aria-selected="false">{{ $singlerestaurantcategory->single_category_name }}</a>
                {{-- <a id="Breakfast-tab" data-toggle="tab" href="#Breakfast" role="tab" aria-controls="Breakfast" aria-selected="false">Breakfast</a>
                <a id="Launch-tab" data-toggle="tab" href="#Launch" role="tab" aria-controls="Launch" aria-selected="false">Launch</a>
                <a id="Dinner-tab" data-toggle="tab" href="#Dinner" role="tab" aria-controls="Dinner" aria-selected="false">Dinner </a>
                <a id="Sneaks-tab" data-toggle="tab" href="#Sneaks" role="tab" aria-controls="Sneaks" aria-selected="false">Sneaks</a>
                <a id="Dinner-tab" data-toggle="tab" href="#Dinner" role="tab" aria-controls="Dinner" aria-selected="false">Dinner </a>
                <a id="Sneaks-tab" data-toggle="tab" href="#Sneaks" role="tab" aria-controls="Sneaks" aria-selected="false">Sneaks</a> --}}
                @endforeach
            </div>
        </div>
      </div>
      
    </div>
</section>

<section class="food_menu gray_bg mb-5 pb-5">
  <div class="container">
      <div class="row justify-content-between">
          
          
          <div class="col-lg-12">
              <div class="tab-content" id="myTabContent">
                  <div class="tab-pane fade show active single-member" id="Special" role="tabpanel" aria-labelledby="Special-tab">
                      <div class="row">
                          <div class="col-sm-6 col-lg-6">
                             {{-- <img src="/all_restaurants_assets/img/filter.png" alt=""  onclick="openNav()"> --}}
                            <a href="#" onclick="openNav()" class="procut-link">
                                <div class="single_food_item media">
                                    <div class="media-body align-self-center">
                                        <h3>Pork Sandwich</h3>
                                        <p>They're wherein heaven seed hath nothing</p>
                                        <h5>$40.00</h5>
                                    </div>
                                    <img src="/images/foods.webp" alt="...">
                                </div>
                            </a>
                          </div>
                         
                      </div>
                  </div>
                  
              </div>
          </div>
      </div>
  </div>
</section>

<div class="fixedbutton">
  <div class="d-flex justify-content-between m-0 p-0 back-colr">
    <div class="count">
      <p>2</p>
    </div>
    <div class="view">
      <a href="#">View your cart</a>
    </div>
    <div class="price">
      <p>Rs,1050,00</p>
    </div>
  
  </div>
</div>
@include('ready_food.layouts.footer_include')
<script>
   const navbar = document.querySelector(".menu-page-nav");

   window.onscroll = ()=>{
      this.scrollY > 20 ? navbar.classList.add("sticky") : navbar.classList.remove("sticky");
    }

function openNav() {
document.getElementById("myproduct").style.height = "100%";
}

function closeNav() {
document.getElementById("myproduct").style.height = "0%";
}
//plugin bootstrap minus and plus
//http://jsfiddle.net/laelitenetwork/puJ6G/
$('.btn-number').click(function(e){
    e.preventDefault();
    
    fieldName = $(this).attr('data-field');
    type      = $(this).attr('data-type');
    var input = $("input[name='"+fieldName+"']");
    var currentVal = parseInt(input.val());
    if (!isNaN(currentVal)) {
        if(type == 'minus') {
            
            if(currentVal > input.attr('min')) {
                input.val(currentVal - 1).change();
            } 
            if(parseInt(input.val()) == input.attr('min')) {
                $(this).attr('disabled', true);
            }

        } else if(type == 'plus') {

            if(currentVal < input.attr('max')) {
                input.val(currentVal + 1).change();
            }
            if(parseInt(input.val()) == input.attr('max')) {
                $(this).attr('disabled', true);
            }

        }
    } else {
        input.val(0);
    }
});
$('.input-number').focusin(function(){
   $(this).data('oldValue', $(this).val());
});
$('.input-number').change(function() {
    
    minValue =  parseInt($(this).attr('min'));
    maxValue =  parseInt($(this).attr('max'));
    valueCurrent = parseInt($(this).val());
    
    name = $(this).attr('name');
    if(valueCurrent >= minValue) {
        $(".btn-number[data-type='minus'][data-field='"+name+"']").removeAttr('disabled')
    } else {
        alert('Sorry, the minimum value was reached');
        $(this).val($(this).data('oldValue'));
    }
    if(valueCurrent <= maxValue) {
        $(".btn-number[data-type='plus'][data-field='"+name+"']").removeAttr('disabled')
    } else {
        alert('Sorry, the maximum value was reached');
        $(this).val($(this).data('oldValue'));
    }
    
    
});
$(".input-number").keydown(function (e) {
        // Allow: backspace, delete, tab, escape, enter and .
        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 190]) !== -1 ||
             // Allow: Ctrl+A
            (e.keyCode == 65 && e.ctrlKey === true) || 
             // Allow: home, end, left, right
            (e.keyCode >= 35 && e.keyCode <= 39)) {
                 // let it happen, don't do anything
                 return;
        }
        // Ensure that it is a number and stop the keypress
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
    });
</script>