@include('single_dashboard.layouts.head-single-dashboard')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<section class="mt-10">
    <div class="container">
        <div class="row">
            <div class="col-md-7 mt-4 mb-4">
                <div class="row">
                    <div class="col-md-12 mt-4 mb-4">
                        <div class="col-md-12">
                            <div class="checkout-card">
                                <h2 class="font-weight-bold text-primary">Items</h2>
                                <hr>
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="item-img">
                                            <img src="/images/tikka.jpg" alt="" class="img-fluid">
                                        </div>
                                    </div>
                                    <div class="col-md-9">
                                        <div class="content">
                                            <h3 class="font-weight-lighter">Product Name</h3>
                                            <p><span>1</span>* Rs:2500</p>
                                            
                                            <div class="d-flex">
                                                <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>
                                                <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-trash-alt"></i>
                                                    </span>
                                                  </button>
                                              </div>
    
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12 mt-4 mb-4">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="checkout-card">
                                    <h2 class="font-weight-bold text-primary">Dine In / Takeaway / Deliver</h2>
                                    <hr>
                                    <div>
                                        <input class="#" type="radio" name="#" value="Dine In" checked>
                                        <label>Dine In</label>
                                        <br>
                                        <input class="#" type="radio" name="#" value="Takeaway">
                                        <label>Takeaway</label>
                                        <br>
                                        <input class="#" type="radio" name="#" value="Deliver">
                                        <label>Deliver</label>
                                    </div>
                                   
                                </div>
                            </div>
                        </div>       
                    </div>
                    <div class="col-md-12 mt-4 mb-4">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="checkout-card">
                                    <h2 class="font-weight-bold text-primary">Table</h2>
                                    <hr>
                                    <div>
                                        <select name="#" id="#" class="form-control">
                                            <option value="#">1</option>
                                            <option value="#">2</option>
                                            <option value="#">Frist floor-table 1</option>
                                        </select>
                                    </div>
                                    {{-- <h2 class="font-weight-bold text-primary">Pickup time</h2>
                                    <hr>
                                    <div>
                                        <select name="#" id="#" class="form-control">
                                            <option value="#">11:30AM-12:00AM</option>
                                            <option value="#">11:30AM-12:00AM</option>
                                            <option value="#">11:30AM-12:00AM</option>
                                            <option value="#">11:30AM-12:00AM</option>
                                            <option value="#">11:30AM-12:00AM</option>
                                        </select>
                                    </div> --}}
                                    {{-- <h2 class="font-weight-bold text-primary">Delivery Info</h2>
                                    <hr>
                                    <h2 class="font-weight-bold text-primary">Determine the delivery location</h2>
                                    <div>
                                        <input type="text" id="vehicle1" name="vehicle1" placeholder="Your delivery address here.." class="form-control">
                                        <label>Delivery Area</label>
                                        <select name="#" id="#" class="form-control">
                                            <option value="#">11:30AM-12:00AM</option>
                                            <option value="#">11:30AM-12:00AM</option>
                                            <option value="#">11:30AM-12:00AM</option>
                                            <option value="#">11:30AM-12:00AM</option>
                                            <option value="#">11:30AM-12:00AM</option>
                                        </select>
                                    </div> --}}
                                </div>
                                
                            </div>
                        </div>       
                    </div>
                    <div class="col-md-12 mt-4 mb-4">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="checkout-card">
                                    <h2 class="font-weight-bold text-primary">Customer Info</h2>
                                    <hr>
                                    <div>
                                        <label>Customer Name</label>
                                        <input type="text" name="#" class="form-control" placeholder="Name here">
                                        <label>Phone</label>
                                        <input type="text" name="#" class="form-control" placeholder="Name here">
                                    </div>
                                   
                                </div>
                            </div>
                        </div>       
                    </div>
                    <div class="col-md-12 mt-4 mb-4">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="checkout-card">
                                    <h2 class="font-weight-bold text-primary">Comment</h2>
                                    <hr>
                                    <div>
                                        <textarea name="#" id="#"  rows="5" placeholder="Comment here..." class="form-control"></textarea>
                                    </div>
                                   
                                </div>
                            </div>
                        </div>       
                    </div>
                    <div class="col-md-12 mt-4 mb-4">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="checkout-card">
                                    <h2 class="font-weight-bold text-primary">Restaurant Information</h2>
                                    <hr>
                                    <div>
                                        <ul>
                                            <li class="font-weight-bold">Zain testing Restaurant</li>
                                            <li>Testing Account</li>
                                            <li>+9665736381649</li>
                                        </ul>
                                    </div>
                                   
                                </div>
                            </div>
                        </div>       
                    </div>
                </div>
            </div>
            <div class="col-md-5  mt-5 mb-5">
                <div class="row">
                    <div class="col-md-12">
                        <div class="checkout-card">
                            <h2 class="font-weight-bold text-primary">Checkout</h2>
                            <hr>
                            <div>
                                <h6>Subtotal:Rs:2500</h6>
                                <h6>Total:Rs:2500</h6>
                                <div class="p-4 bg-light">
                                    <div class="row">
                                        <div class="col-md-7">
                                            <input type="text" class="form-control">
                                        </div>
                                        <div class="col-md-5">
                                            <button class="btn btn-outline-primary pt-2 pb-2 pr-2 pl-2">Apply</button>
                                        </div>
                                        <div>
                                            <input class="#" type="radio" name="#" value="Dine In" checked>
                                            <label>Cash / Card Terminal </label>
                                            <br>
                                            <input class="#" type="radio" name="#" value="Takeaway">
                                            <label>Pay with card / Apple Pay</label>
                                            <br>
                                            <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
                                            <label for="vehicle1"> I agree to the Terms of Service and Privacy Policy.</label><br>
                                        </div>
                                        <div class="text-center">
                                            <a href="{{ route('single-restaurant-success-order') }}"  type="button" class="btn btn-success mt-4 paymentbutton Display-3">Place Order</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>