@include('ready_food.layouts.header_include')



<nav class="menu-page-nav">
  <div class="container">
    <div class="row">
      <div class="col-6 text-left">
        <a href="{{ route('main-screen') }}" class="angle-set">
          <i class="uil uil-angle-left"></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">
        <div class="col-md-12">
          <div class="restaurant-content text-center">
            <h3>Broadway Pizza -hyderabad</h3>
          </div>
          <div class="text-center border-bottom border-top pt-2 pb-2 pl-3 pr-3">
            <h6 class="font-weight-bold">Your order was cancelled</h6>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12 mt-5">
          <h4 class="font-weight-bold">Order details</h4>
          <table class="table">
            <tbody>
              <tr>
                <td><h6 class="font-weight-bold">Order number</h6></td>
                <td><h6 class="font-weight-bold text-right bg"> <span class="bg-light font-weight-bold p-2">#45sd,4s</span> </h6></td>
              </tr>
              <tr>
                <td><h6 class="font-weight-bold">Order from</h6></td>
                <td><h6 class="font-weight-bold text-right text-primary">Restaurant-name</h6></td>
              </tr>
              <tr>
                <td><h6 class="font-weight-bold">Delivery address</h6></td>
                <td><h6 class="font-weight-bold text-right">Auto bhan road hyderabad</h6></td>
              </tr>
            </tbody>
          </table>
        </div>
        
        <div class="col-md-12">
          <table class="table">
            <tbody>
              <tr class="border-top border-bottom">
                <td><h6 class="font-weight-bold">3x</h6></td>
                <td><h6 class="font-weight-bold">Pizza</h6></td>
                <td><h6 class="font-weight-bold text-right">1,160</h6></td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="col-md-12  mb-5 pb-5">
          <table class="table">
            <tbody>
              <tr class="border-top border-bottom">
                <td><h6 class="font-weight-bold">Subtotal</h6></td>
                <td><h6 class="font-weight-bold text-right">1,160</h6></td>
              </tr>
            </tbody>
          </table>
        </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>