@include('ready_food.layouts.header_include')

<section>
  <div class="food-delivery-head">
    {{-- <div class="food-delivery-back">
      <a href="#"><i class="uil uil-multiply"></i></a>
    </div> --}}
    <div class="food-delivery pb-2">
      <h6>Cancel Order</h6>
      <p>Restaurant Name</p>
    </div>
  </div>
</section>
<section>
  <div class="container">
    <div class="row">
      <div class="col-md-12 mt-5">
        <div class="text-center">
            <div class="order-content">
              <p class="pt-5 pb-3">Your order has been</p>
              <h2 class="font-weight-bold">Cancelled</h2>
              <img src="/all_restaurants_assets/img/cancellogo.png" alt="" class="img-fluid m-0 p-0">
              <p class="pt-2 pb-2">You had to cancel&nbsp;?&nbsp;No worries. <br> You were not charged</p>
              <div class="w-100">
                <a href="#">
                  <button class="md-ripples ripple-btn" type="button">Place this order again</button>
                </a>
              </div>
            </div>
        </div>
      </div>
      <div class="col-md-12 pt-2">
        <table class="table border-top border-bottom">
          <tbody>
            <tr>
              <td colspan="2" class="font-weight-bold">Order Details</td>
            </tr>

            <tr>
              <td class="text-left sort-name">Order number</td>
              <td class="text-right font-weight-bold order-id">                    
                <p>#1565115</p>
              </td>
            </tr>

            <tr>
              <td class="text-left sort-name">Order from</td>
              <td class="text-right font-weight-bold">
                <p class="restaurant-order">Broadway Pizza-Hyderabad</p>
              </td>
            </tr>

          </tbody>
        </table>
      </div>
      {{-- <div class="col-md-12 pt-2">
          <div>
            <h6 class="font-weight-bold pl-2">Browse similar restaurants</h6>
          </div>
          <div class="wrapper">
            <div class="carousel owl-carousel">
              @foreach($browserallrestaurants as $browserallrestaurant)
              <div class="card">
                <article class="restaurant-blog">
                  <header class="card__thumb">
                    <a href="#"><img src="/images/restaurants/{{ $browserallrestaurant->restaurant_image }}" class="img-fluid"></a>
                  </header>
                  <div class="card__date_deal mt-3">
                    <span class="card__date__offer">Summer Deals</span>
                  </div>
                  <div class="card__date mt-3">
                    <span class="card__date__day">
                      <input type="checkbox" class="option-input radio" name="example">
                    </span>
                  </div>
                  <div class="card__body">
                    <div class="card__category"><a href="#">{{ $browserallrestaurant->minimum_delivery_time}} Mint</a></div>
                    <div class="d-flex justify-content-between">
                      <div class="card__title"><a href="#">{{ $browserallrestaurant->restaurant_name}}</a></div>
                      <div class="card__rating mt-1"><a href="#"><i class="uil uil-star"></i>3.8/5 <span>(1k+)</span></a></div>
                    </div>
                    <div class="card__subtitle"> <a href="#">{{ $browserallrestaurant->Category->restaurant_category}}</a> </div>
                    <div class="card__delivery"> <span>Rs. &nbsp;50 <label>Delivery fee</label></span>  </div>
                  </div>
                  
                </article>
              </div>
              @endforeach
            </div>
          </div>
      </div> --}}
      <div class="col-md-12 pt-2">
        <a href="{{ route('all-restaurants') }}">
          <div class="white-bg">
              <div class="d-flex justify-content-between align-items-center">
                <div class="heading-rest pt-3 pb-3 pr-3 pl-3">
                  <h4 class="font-weight-bold text-dark">See all restaurant</h4>
                </div>
                <div class="heading-arrow pt-3 pb-3 pr-3 pl-3">
                  <i class="md-ripples uil uil-angle-right"></i>
                </div>
              </div>
          </div>
        </a>
      </div>
    </div>
  </div>
</section>
@include('ready_food.layouts.footer_include')
<script>
  $(".carousel").owlCarousel({
    margin: 10,
    loop: true,
    autoplay: true,
    autoplayTimeout: 2000,
    autoplayHoverPause: true,
    responsive: {
      0:{
        items:1,
        nav: false
      },
      600:{
        items:2,
        nav: false
      },
      1000:{
        items:3,
        nav: false
      }
    }
  });
</script>