@include('ready_food.layouts.header_include')

<nav class="menu-page-nav">
  <div class="container">
    <div class="row">
      <div class="col-12 text-left">
        <a href="{{ route('all-restaurants') }}" 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  pt-2 pb-2">
        <div class="col-12">
          <div class="restaurant-content">
            <h3>{{ $all_restaurant_informs->restaurant_name}}</h3>
          </div>
        </div>
        <div class="col-12 pt-2">
          <div class="row">
            <div class="col-2">
              <div class="side-icon pt-2 text-center">
                <i class="fas fa-star"></i>
              </div>
            </div>
            <div class="col-10">
              <div class="side-content-info">
                <h6 class="font-weight-bold">4.1</h6>
                <p>1000+ people rated</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 pt-2">
          <div class="row">
            <div class="col-2">
              <div class="side-icon pt-2 text-center">
                <i class="fas fa-map-marker-alt"></i>
              </div>
            </div>
            <div class="col-10">
              <div class="side-content-info pt-2">
                <h6 class="font-weight-bold">Restaurant address here</h6>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 pt-2">
          <div class="row">
            <div class="col-2">
              <div class="side-icon pt-2 text-center">
                <i class="fas fa-clock"></i>
              </div>
            </div>
            <div class="col-10">
              <div class="side-content-info">
                <h6 class="font-weight-bold">Monday-Sunday</h6>
                <p><span>00:00</span>- <span>03:00</span></p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 pt-2">
          <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item">
              <a class="nav-link active" id="review-tab" data-toggle="tab" href="#review" role="tab" aria-controls="review" aria-selected="true">Reviews</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="about-tab" data-toggle="tab" href="#about" role="tab" aria-controls="about" aria-selected="false">About</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
</section>

<section class="gray_bg mb-5 pb-5">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="tab-content" id="myTabContent">
          <div class="tab-pane fade show active" id="review" role="tabpanel" aria-labelledby="review-tab">
            <div class="container pt-4">
              <div class="row">
                <div class="col-md-12">
                  <div class="d-flex justify-content-between align-items-center">
                    <h6 class="font-weight-bold">All Ratings(1000+)</h6>
                    <div>
                      <i class="fas fa-star"></i>
                      <span class="font-weight-bold">4.1</span>
                    </div>
                  </div>
                  <div class="mt-3 mb-3">
                    <h5 class="font-weight-bold">Ratings</h5>
                  </div>
                  <div class="row border-bottom pt-1 pb-1">
                    <div class="col-10">
                      <div>
                        <h6 class="font-weight-bold">Name here</h6>
                        <p>3 Days ago</p>
                        <p>Excellent</p>
                      </div>
                    </div>
                    <div class="col-2">
                      <div class="text-right">
                        <i class="fas fa-star"></i>
                        <span class="font-weight-bold">4.1</span>
                      </div>
                    </div>
                  </div>
                  <div class="row border-bottom pt-1 pb-1">
                    <div class="col-10">
                      <div>
                        <h6 class="font-weight-bold">Name here</h6>
                        <p>3 Days ago</p>
                        <p>Excellent</p>
                      </div>
                    </div>
                    <div class="col-2">
                      <div class="text-right">
                        <i class="fas fa-star"></i>
                        <span class="font-weight-bold">4.1</span>
                      </div>
                    </div>
                  </div>
                  <div class="row border-bottom pt-1 pb-1">
                    <div class="col-10">
                      <div>
                        <h6 class="font-weight-bold">Name here</h6>
                        <p>3 Days ago</p>
                        <p>Excellent</p>
                      </div>
                    </div>
                    <div class="col-2">
                      <div class="text-right">
                        <i class="fas fa-star"></i>
                        <span class="font-weight-bold">4.1</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="tab-pane fade" id="about" role="tabpanel" aria-labelledby="about-tab">
            <div class="container pt-4">
              <div class="row">
                <div class="col-md-12">
                  <div>
                    <h1>Map Location Here</h1>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>  
      </div>  
    </div>
  </div>
</section>
@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>