@include('ready_food.layouts.header_include')

<div id="myCart" class="overlay">
  <a href="javascript:void(0)" class="md-ripples closebtn" onclick="closeCart()">&times; <span>&nbsp;&nbsp;&nbsp;Cart</span></a>
  <div class="overlay-content">
    <div class="container">
      <div class="row">
        {{-- <div class="col-md-12">
          <div class="hungry-portion">
              <div class="hungry-img">
                <img src="/all_restaurants_assets/img/icons.png" alt="" class="img-fluid">
              </div>
              <div>
                <button class="c-button c-button--blue" type="button">
                  <div class="c-ripple js-ripple">
                    <span class="c-ripple__circle"></span>
                  </div>
                  Browser
                </button>
              </div>
          </div>
        </div> --}}
        <div class="col-md-12">
          <main>
            <article>
          
                <!-- Start Multiform HTML -->
              <section class="multi_step_form mt-3">  
                  <form id="msform"> 
                    <!-- Tittle -->
                   
                    <!-- progressbar -->
                    <ul id="progressbar">
                      <li class="active">Menu</li>  
                      <li>Cart</li> 
                      <li>Checkout</li>
                    </ul>
                    <!-- fieldsets -->
                    <fieldset>
                      
                      <div class="container">
                        <div class="row">
                          <div class="col-md-12">
                            <div class="white-bg">
                            <div class="row">
                              <div class="col-4 col-4-full">
                                <div class="rider-img float-left">
                                  <img src="/all_restaurants_assets/img/bike-icons.png" alt="" class="img-fluid">
                                </div>
                              </div>
                              <div class="col-8 col-8-full">
                                <div class="rider-content">
                                    <h6>Delivery time</h6>
                                    <h2>Now(55min)</h2>
                                    <a href="#">Change</a>
                                </div>
                              </div>
                            </div>
                          </div>
                          </div>
                          <div class="col-md-12">
                            <div class="table-responsive">
                            <table class="table cart-table">
                              <tbody>
                                  <tr class="border-bottom">
                                    <td class="text-left w-25">
                                      {{-- <select name="#" class="form-control">
                                        <option value="1">1</option>
                                        <option value="1">1</option>
                                        <option value="1">1</option>
                                        <option value="1">1</option>
                                      </select> --}}
                                      <div class="qty">
                                          <span class="minus">-</span>
                                          <input type="number" class="count" name="qty" value="1">
                                          <span class="plus">+</span>
                                      </div>
                                    </td>
                                    <td class="item-img text-center">
                                      <img src="/all_restaurants_assets/img/item.png" alt="" class="img-fluid">
                                    </td>
                                    <td class="text-center">
                                      <p class="item-name">name</p>
                                    </td>
                                    <td class="text-right">
                                      <span class="font-weight-bold w-100">Rs:<span class="font-weight-lighter">1000</span> </span>
                                    </td>
                                  </tr>
                              </tbody>
                            </table>
                            </div>
                          </div>
                          <div class="col-md-12">
                            <div>
                              <a href="#" class="add-more-item">Add more items</a>
                            </div>
                          </div>
                          <div class="col-md-12 mt-3">
                            <table class="table cart-table">
                              <tbody>
                                <tr>
                                  <td class="text-left sort-name">Subtotal</td>
                                  <td class="text-right font-weight-bold">Rs.11,000,00</td>
                                 </tr>
                                 <tr>
                                  <td class="text-left sort-name">Delivery Fee</td>
                                  <td class="text-right font-weight-bold">Rs.50,00</td>
                                 </tr>
                                 <tr>
                                  <td class="text-left vocher">
                                    <span><i class="uil uil-file"></i>Apply a Vouchers</span>
                                  </td>
                                 </tr>
                              </tbody>
                            </table>
                          </div>
                          <div class="col-md-12">
                            <div class="payment-section">
                              <table class="table cart-table">
                                <tbody>
                                  <tr>
                                    <td class="text-left sort-name">Total <span>(incl.VAT)</span></td>
                                    <td class="text-right font-weight-bold">Rs.11,000,00</td>
                                   </tr>
                                   
                                </tbody>
                              </table>
                              {{-- <a href="#" class="ReviewPay-btn">Review payment and address</a> --}}
                            </div>
                            <div class="mt-2 mb-5">
                              <button class="md-ripples ripple-btn">Review payment & address</button>
                            </div>
                          </div>
                        </div>
                      </div>
                      <button type="button" class="action-button previous_button">Back</button>
                      <button type="button" class="next action-button">Continue</button>  
                    </fieldset>
                    <fieldset>
                      <div class="container">
                        <div class="row">
                          <div class="col-md-12">
                            <div class="white-bg ">
                              <div class="d-flex justify-content-between pt-2 pb-2 pr-2 pl-2">
                                  <div class="delivery-icon"><i class="uil uil-location-point"></i></div>
                                  <div class="delivery-head">
                                    <h5 class="font-weight-bold">Delivery address</h5>
                                  </div>
                                  <div class="delivery-icon"><i class="uil uil-pen"></i></div>
                              </div>
                              <div class="img-location pt-2 pb-2 pr-2 pl-2">
                                <img src="/all_restaurants_assets/img/location.jpg" alt="" class="img-fluid">
                              </div>
                              <div class="address-area pt-2 pr-2 pl-2 text-left">
                                <p>Ria Auto Bhan Road <br> Hyderabad</p>
                              </div>
                              <div class="pr-2 pl-2">
                                <hr>
                              </div>
                              <div class="d-flex pt-2 pb-2 pr-2 pl-2">
                                <div class="instructions-icon"><i class="uil uil-plus"></i></div>
                                  <div class="instructions-head">
                                    <span>Add specail instructions</span>
                                  </div>
                              </div>
                            </div>
                          </div>
                          <div class="col-md-12">
                            <div class="white-bg pt-2 pb-2">
                              <div class="d-flex justify-content-between pt-2 pb-2 pr-2 pl-2">
                                  <div class="delivery-icon"><i class="uil uil-wallet"></i></div>
                                  <div class="delivery-head">
                                    <h5 class="font-weight-bold">Payment Method</h5>
                                  </div>
                                  <div class="delivery-icon"><i class="uil uil-pen"></i></div>
                              </div>
                              <hr>
                              <div class="d-flex justify-content-between pt-2 pb-2 pr-2 pl-2">
                                <div class="cash-div pt-2 pb-2 pr-2 pl-2">
                                  <div class="instructions-icon">
                                    <i class="uil uil-money-bill"></i>
                                    <span class="font-weight-bold text-dark pl-2">Cash</span>
                                  </div>
                                  
                                </div>
                                <div class="price-here pt-2 pb-2 pr-2 pl-2">
                                  <h6 class="font-weight-bold">Rs.790,00</h6>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="col-md-12">
                            <div class="white-bg pt-2 pb-2">
                              <div class="d-flex justify-content-between pt-2 pb-2 pr-2 pl-2">
                                  <div class="delivery-icon"><i class="uil uil-wallet"></i></div>
                                  <div class="delivery-head">
                                    <h5 class="font-weight-bold">Order summary</h5>
                                  </div>
                                  <div class="delivery-icon"></div>
                              </div>
                              <hr>
                              <table class="table order-table pt-4 pb-4">
                                <tbody>
                                  <tr>
                                    <td class="text-left prodct-name">Product</td>
                                    <td class="text-right font-weight-bold">Rs.11,000,00</td>
                                   </tr>
                                   <tr>
                                    <td class="text-left prodct-name">Product</td>
                                    <td class="text-right font-weight-bold">Rs.11,000,00</td>
                                   </tr>
                                   
                                </tbody>
                              </table> 
                              <hr>
                              <table class="table order-table pt-4 ">
                                <tbody>
                                  <tr>
                                    <td class="text-left prodct-name">Subtotal</td>
                                    <td class="text-right font-weight-bold">Rs.11,000,00</td>
                                   </tr>
                                   <tr>
                                    <td class="text-left prodct-name">Delivery Fee</td>
                                    <td class="text-right font-weight-bold">Rs.11,000,00</td>
                                   </tr>
                                   
                                </tbody>
                              </table> 
                            </div>
                          </div>
                          <div class="col-md-12">
                            <div class="terms-para">
                              <p>By completing this order ,I agree to all <span>terms & conditions</span> </p>
                            </div>
                          </div>
                        </div>
                      </div> 
                      
                      <div class="white-bg pt-2 pb-2">
                        <div class="d-flex justify-content-between pt-2 pb-2 pr-2 pl-2">
                            <div class="delivery-icon pr-2 pl-2"><h5 class="font-weight-bold">Order summary</h5></div>
                            <div class="delivery-head">
                              <h5 class="font-weight-bold">Rs,760,00</h5>
                            </div>
                            
                        </div>
                        {{-- <div class="mt-2 mb-2">
                          <a href="#" class="confrim-addres" onclick="openaddress()"></a>
                        </div> --}}
                        <div class="mt-2 mb-2">
                          <button class="md-ripples ripple-btn" href="#" onclick="openaddress()" type="button">Confrim address</button>
                        </div>
                        <div class="w-100">
                          <a href="{{ route('your-order') }}" >
                            <button class="md-ripples ripple-btn" type="button">Place Order</button>
                          </a>
                        </div>
                      </div>
                      <button type="button" class="action-button previous previous_button">Back</button>
                      <button type="button" class="next action-button">Continue</button>  
                      

                    </fieldset>  
                    <fieldset>
                      
                      <button type="button" class="action-button previous previous_button">Back</button> 
                      <a href="#" class="action-button">Finish</a> 
                    </fieldset>  
                  </form>  
              </section> 
                <!-- END Multiform HTML -->
            </article>
           </main>
        </div>
        {{-- <div class=""></div> --}}
      </div>
    </div>
    
    {{-- <div class="text-center apply-btn">
      <button>Apply</button>
    </div> --}}
  </div>
</div>

<div id="myconfrimaddress" class="overlay">
  <a href="javascript:void(0)" class="md-ripples closebtn" onclick="closeaddress()">&times; <span>&nbsp;&nbsp;&nbsp;Confrim Address</span></a>
  <div class="overlay-content">
    <div class="restaurant-section padding-no">
      <div class="restaurant-img">
          <img src="/all_restaurants_assets/img/location.jpg" class="img-fluid">
      </div>  
    </div>
    <div class="white-bg">
      <div class="d-flex justify-content-between pt-2 pb-2 pr-2 pl-2">
          <div class="delivery-icon"><i class="uil uil-location-point"></i></div>
          <div class="delivery-head">
            <h5 class="font-weight-bold">Delivery address</h5>
          </div>
          <div class="delivery-icon"><i class="uil uil-pen"></i></div>
      </div> 
      <div class="form">
        <div class="field">
            <input type="text" required>
            <label>Floor/Unit #</label>
        </div>
        <div class="field">
            <input type="password" required>
            <label>(Optional Note to Rider)</label>
        </div>
      </div>
      <div class="label-set pr-2 pl-2">
        <h4 class="font-weight-bold pr-2 pl-2">Add a label</h4>
        <div class="container-fluid">
          <div id="radios">
            <label for="driving" class="material-icons">
              <input type="radio" name="mode" id="driving" value="driving" checked/>
              <span><i class="uil uil-home"></i></span>
              <p>Home</p>
            </label>                
            <label for="cycling" class="material-icons">
              <input type="radio" name="mode" id="cycling" value="cycling" />
              <span><i class="uil uil-bag"></i></span>
              <p>Work</p>
            </label>
            <label for="walking" class="material-icons">
              <input type="radio" name="mode" id="walking" value="walking" />
              <span><i class="uil uil-heart"></i></span>
              <p>Patner</p>
            </label>
            <label for="walking" class="material-icons">
              <input type="radio" name="mode" id="walking" value="walking" />
              <span><i class="uil uil-plus"></i></span>
              <p>Other</p>

            </label>
          </div>
        </div>
      </div>
    </div> 
    
  </div>
</div>

<div id="myfav" class="overlay">
  <a href="javascript:void(0)" class="md-ripples closebtn" onclick="closefav()">&times; <span>&nbsp;&nbsp;&nbsp;Fav</span></a>
  <div class="overlay-content">
    <div class="container">
      <div class="row">       
          <div class="col-md-12">
            <div class="text-center">
                <div class="order-content">
                  <img src="/all_restaurants_assets/img/favlogo.png" alt="" class="img-fluid m-0 p-0">
                  <br>
                  <i class="uil uil-heart favlogo"></i>
                  <div class="mt-4 mb-2">
                    <button class="md-ripples ripple-btn">Lets Find Some Favourite</button>
                  </div>
                </div>
            </div>
        </div>
        <div class="col-md-12">
          <article class="md-ripples restaurant-blog">
            <header class="card__thumb">
             <img src="/images/restaurants/1737036580236073.jpg" class="img-fluid">
            </header>
            <div class="card__date_deal">
              <span class="card__date__offer">Summer Deals</span>
            </div>
            <div class="card__date">
              <span class="card__date__day">
                <input type="checkbox" class="option-input radio" name="example">
              </span>
            </div>
            <div class="card__body">
              <div class="card__category">25 Mint</div>
              <div class="d-flex justify-content-between">
                <div class="card__title">Royal Taj12</div>
                <div class="card__rating mt-1"><i class="uil uil-star"></i>3.8/5 <span>(1k+)</span></div>
              </div>
              <div class="card__subtitle"> Casual dining restaurants </div>
              <div class="card__delivery"> <span>Rs. &nbsp;50 <label>Delivery fee</label></span>  </div>
            </div>
          </article>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="myNav" class="overlay">
  <a href="javascript:void(0)" class="md-ripples closebtn" onclick="closeNav()">&times; <span>&nbsp;&nbsp;&nbsp;Filter</span></a>
  <div class="overlay-content">
    <table class="table">
      <tbody>
       <tr>
        <td colspan="2" class="font-weight-bold">Sort</td>
       </tr>
       <tr>
        <td class="text-left sort-name">Recommended(default)</td>
        <td class="text-right">
          <label class="custom-radio">
            <input type="radio" name="fav_language"> 
            <div class="checkmark"></div>
          </label>
        </td>
        
       </tr>
       <tr>
        <td class="text-left sort-name">Top rated</td>
       <td class="text-right">
          <label class="custom-radio">
            <input type="radio" name="fav_language"> 
            <div class="checkmark"></div>
          </label>
        </td>
       </tr>
       <tr>
        <td class="text-left sort-name">fatest Delivery</td>
       <td class="text-right">
          <label class="custom-radio">
            <input type="radio" name="fav_language"> 
            <div class="checkmark"></div>
          </label>
        </td>
       </tr>
       <tr>
        <td class="text-left sort-name">Distance</td>
       <td class="text-right">
          <label class="custom-radio">
            <input type="radio" name="fav_language"> 
            <div class="checkmark"></div>
          </label>
        </td>
       </tr>
       
       <tr>
        <td colspan="2" class="font-weight-bold">Price</td>
       </tr>
       <tr>
        <td colspan="2">
         
           <ul class="ks-cboxtags">
            <li>
              <input type="checkbox" id="checkboxOne" name="low" value="1">
              <label for="checkboxOne">$</label>
            </li>
            <li>
              <input type="checkbox" id="checkboxTwo" name="medium" value="2">
              <label for="checkboxTwo">$$</label>
            </li>
            <li>
              <input type="checkbox" id="checkboxThree" name="high" value="3">
              <label for="checkboxThreee">$$$</label>
            </li>
          </ul>
        </td>
       </tr>
       <tr>
        <td colspan="2" class="font-weight-bold">Offers</td>
       </tr>
       <tr>
        <td class="text-left sort-name">Accepts Vouchers</td>
       <td class="text-right">
          <label class="custom-radio">
            <input type="radio" name="fav_language"> 
            <div class="checkmark"></div>
          </label>
        </td>
       </tr>
       <tr>
        <td class="text-left sort-name">Free Delivery</td>
       <td class="text-right">
          <label class="custom-radio">
            <input type="radio" name="fav_language"> 
            <div class="checkmark"></div>
          </label>
        </td>
       </tr>
       <tr>
        <td class="text-left sort-name">Deal</td>
       <td class="text-right">
          <label class="custom-radio">
            <input type="radio" name="fav_language"> 
            <div class="checkmark"></div>
          </label>
        </td>
       </tr>
       <tr>
        <td class="text-left sort-name">Online payment available</td>
       <td class="text-right">
          <label class="custom-radio">
            <input type="radio" name="fav_language"> 
            <div class="checkmark"></div>
          </label>
        </td>
       </tr>
       
      </tbody>
    </table>
    <div>
      <button class="md-ripples ripple-btn">Apply Voucher</button>
    </div>
  </div>
</div>
<section>
  <div class="food-delivery-head">
    <div class="food-delivery-back">
      <a href="#"><i class="md-ripples uil uil-angle-left-b"></i></a>
    </div>
    <div class="food-delivery">
      
      <h6>Food Delivery</h6>
      <p>Address here</p>
    </div>
    <div class="wish-list-food">
      <a href="#">
        <i class="md-ripples uil uil-heart" onclick="openfav()"></i>
        <label>1</label>
      </a>
    </div>
    <div class="wish-list-Cart">
      <a href="#">
        <i class="md-ripples uil uil-shopping-bag" onclick="openCart()"></i>
        <label>1</label>
      </a>
    </div>
  </div>
</section>
{{-- <header>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">
      <img src="/all_restaurants_assets/img/slack.png" class="navbar-brand-img h-100" alt="main_logo">
        <span class="ms-2">Qucik & Perfect</span>
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <div class="action">
            <div class="profile" onclick="menutoggle();">
              <img src="/all_restaurants_assets/img/user.png" alt="">
            </div>
            <div class="menu">
              <h3>SomeOne Here <br> <span>Web designer</span></h3>
              <ul>
                <li><a href="#">PandaPay</a></li>
                <li><a href="#">Order & reordering</a></li>
                <li><a href="#">Profile</a></li>
                <li><a href="#">Vouchers</a></li>
                <li><a href="#">Challange & rewards</a></li>
                <li><a href="#">Helpcenter</a></li>
                <li><a href="#">Logout</a></li>
              </ul>
            </div>
          </div>
        </li>
        <li class="nav-item">
          <div class="wish-list">
            <i class="uil uil-heart"></i>
          </div>
        </li>
        <li class="nav-item">
          <div class="wish-list">
            <i class="uil uil-shopping-bag"></i><span>1</span>
            
          </div>
        </li>
      </ul>
    </div>
  </nav>
</header> --}}


<section>
  <div class="main-flex">
    <div class="group">
      <svg class="icon" aria-hidden="true" viewBox="0 0 24 24"><g><path d="M21.53 20.47l-3.66-3.66C19.195 15.24 20 13.214 20 11c0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.215 0 4.24-.804 5.808-2.13l3.66 3.66c.147.146.34.22.53.22s.385-.073.53-.22c.295-.293.295-.767.002-1.06zM3.5 11c0-4.135 3.365-7.5 7.5-7.5s7.5 3.365 7.5 7.5-3.365 7.5-7.5 7.5-7.5-3.365-7.5-7.5z"></path></g></svg>
      <input placeholder="Search" type="search" class="search-box">
    </div>
    <div class="md-ripples  group-2">
      <img src="/all_restaurants_assets/img/filter2.png" alt=""  onclick="openNav()">
    </div>
  </div>
</section>

<section>
  <div class="container-fluid">
    <div class="row every-section-padding">
      <div class="col-md-12">
          <div class="restaurant-heading">
            <h1>All Restaurants</h1>
          </div>
          
      </div>
    </div>
    <div class="row every-section-padding">
      @foreach($allrestaurants as $allrestaurant)
        <div class="col-md-4">
          <a href="{{ route('single-restaurant-menu', ['id'=> $allrestaurant->id ]) }}">
            <article class="md-ripples restaurant-blog">
                <header class="card__thumb">
                  <img src="/images/restaurants/{{ $allrestaurant->restaurant_image }}" class="img-fluid">
                </header>
              <div class="card__date_deal">
                <span class="card__date__offer">Summer Deals</span>
              </div>
              <div class="card__date">
                <span class="card__date__day">
                  <input type="checkbox" class="option-input radio" name="example">
                </span>
              </div>
              <div class="card__body">
                <div class="card__category">{{ $allrestaurant->minimum_delivery_time}} Mint</div>
                <div class="d-flex justify-content-between">
                  
                  <div class="card__title">{{ $allrestaurant->restaurant_name}}</div>
                  <div class="card__rating mt-1"><i class="uil uil-star"></i>3.8/5 <span>(1k+)</span></div>
                </div>
                <div class="card__subtitle"> {{ $allrestaurant->Category->restaurant_category}} </div>
                <div class="card__delivery"> <span>Rs. &nbsp;50 <label>Delivery fee</label></span>  </div>
              </div>
            </article>
          </a>
        </div>
      @endforeach
      
      
      
  </div>
</section> 
@include('ready_food.layouts.footer_include')
<script>
function openaddress() {
document.getElementById("myconfrimaddress").style.height = "100%";
}

function closeaddress() {
document.getElementById("myconfrimaddress").style.height = "0%";
}
</script>
<script>
  function openfav() {
  document.getElementById("myfav").style.height = "100%";
  }
  
  function closefav() {
  document.getElementById("myfav").style.height = "0%";
  }
  </script>
<script>
  $(document).ready(function(){
		    $('.count').prop('disabled', true);
   			$(document).on('click','.plus',function(){
				$('.count').val(parseInt($('.count').val()) + 1 );
    		});
        	$(document).on('click','.minus',function(){
    			$('.count').val(parseInt($('.count').val()) - 1 );
    				if ($('.count').val() == 0) {
						$('.count').val(1);
					}
    	    	});
 		});
</script>