@include('single_dashboard.layouts.head-single-dashboard')

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

{{-- <-- Delete Modal --> --}}
<div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="CategoryTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Edit category</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        =
        <div class="text-center">
          <button type="button" class="btn btn-danger my-4">No</button>
          <button type="button" class="btn btn-primary my-4">Yes</button>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End Delete Modal -->
{{-- Here the menu custom design --}}
<section class="single-restaurant-bg">
  <div class="container pt-10">
    <div class="row">
      <div class="col-md-5">
        <div class="single_restaurant-card">
          <div class="inner-img">
            <img src="/images/slack.png" alt="">
          </div>  
          <div class="inner-content">
            <h2>Restaurant Name </h2>
            <p>Minimum Order <span>Rs 1500</span></p>
          </div>  
        </div>
      </div>
    </div>
  </div>
</section>

<section class="light-bg pt-5 py-5">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
          <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#home">Menu</a></li>
            <li><a data-toggle="tab" href="#menu1">Info</a></li>
          </ul>
          <div class="tab-content">
            <div id="home" class="tab-pane fade in active">
              <div class="row">
                <div class="col-md-12">
                  <div class="row">
                    <div class="col-md-2">
                      <div class="category-content">
                        <h4 class="text-uppercase">Categories</h4>
                        <ul class="list-unstyled">
                          <li><a href="#" class="text-decoration-none text-dark">Testing</a></li>
                          <li><a href="#" class="text-decoration-none text-dark">BBq</a></li>
                          <li><a href="#" class="text-decoration-none text-dark">More</a></li>
                        </ul>
                      </div>
                    </div>
                    <div class="col-md-7">
                      <div class="box-info">
                        <div class="menu-content align-center">
                          <h1>Testing</h1>
                        </div>
                        <div class="content">
                            <a href="#" class="item-offer-horizontal" data-toggle="modal" type="button"  data-target="#delete">
                              <div class="info">
                                <h2>Test Product</h2>
                                <p>Testing Product</p>

                                <div class="extras">
                                  <div class="price">
                                    <span>Rs 2500</span>
                                  </div>
                                </div>
                              </div>
                              <picture>
                                <img src="/images/slack.png" alt="">
                              </picture>
                            </a>
                            
                        </div>
                      </div>  
                      <div class="box-info">
                        <div class="menu-content align-center">
                          <h1>Testing</h1>
                        </div>
                        <div class="content">
                            
                            <a href="#" class="item-offer-horizontal">
                              <div class="info">
                                <h2>Test Product</h2>
                                <p>Testing Product</p>

                                <div class="extras">
                                  <div class="price">
                                    <span>Rs 2500</span>
                                  </div>
                                </div>
                              </div>
                              <picture>
                                <img src="/images/slack.png" alt="">
                              </picture>
                            </a>
                            
                        </div>
                      </div>  
                    </div>
                    <div class="col-md-3">
                      <div class="info">
                        <div class="box-info">
                          <div class="menu-content align-center">
                            <h6>Shopping Cart</h6>
                          </div>
                          <div id="cartList" class="content">
                            <div class="items col-xs-12 col-sm-12 col-md-12 col-lg-12 clearfix">
                              <div class="clearfix">
                                <h6>Test Product</h6>
                                <p>1* 2000 Rs</p>
                              </div>
                              <div class="d-flex flex-row-reverse">
                                <button class="btn btn-outline-primary btn-icon btn-sm page-link btn-cart-radius" type="button">
                                  <span class="btn-inner--icon btn-cart-icon">
                                    <i class="uil uil-trash-alt"></i>
                                  </span>
                                </button>
                                <button class="btn btn-outline-primary btn-icon btn-sm page-link btn-cart-radius" type="button">
                                  <span class="btn-inner--icon btn-cart-icon">
                                    <i class="uil uil-plus"></i>
                                  </span>
                                </button>
                                <button class="btn btn-outline-primary btn-icon btn-sm page-link btn-cart-radius" type="button">
                                  <span class="btn-inner--icon btn-cart-icon">
                                   <i class="uil uil-minus"></i>
                                  </span>
                                </button>
                              </div>
                              <div class="total">
                                <p>Subtotal: <span>Rs 2000</span></p>
                                <br>
                                <a href="#" class="button full-button">Checkout</a>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
           
          </div>
      </div>
    </div>
  </div>
</section>