{% load static %}
{% load widget_tweaks %}
{% load crispy_forms_tags %}
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Nsoft</title>
    <!-- SEO Meta Tags-->
    <meta name="description" content="Cartzilla - Bootstrap E-commerce Template">
    <meta name="keywords" content="bootstrap, shop, e-commerce, market, modern, responsive,  business, mobile, bootstrap, html5, css3, js, gallery, slider, touch, creative, clean">
    <meta name="author" content="Createx Studio">
    <!-- Viewport-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Favicon and Touch Icons-->
    <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
    <link rel="manifest" href="site.webmanifest">
    <link rel="mask-icon" color="#fe6a6a" href="safari-pinned-tab.svg">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="theme-color" content="#ffffff">

    <link rel="stylesheet" media="screen" href="{% static 'css/simplebar.min.css' %}"/>
    <link rel="stylesheet" media="screen" href="{% static 'css/tiny-slider.css' %}"/>
    <!-- Main Theme Styles + Bootstrap-->
    <link rel="stylesheet" media="screen" href="{% static 'css/theme.min.css' %}">

    <script>
      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
      'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
      })(window,document,'script','dataLayer','GTM-WKV3GT5');
    </script>
  </head>
  <!-- Body-->
  <body class="handheld-toolbar-enabled">
    <!-- Google Tag Manager (noscript)-->
    <noscript>
      <iframe src="//www.googletagmanager.com/ns.html?id=GTM-WKV3GT5" height="0" width="0" style="display: none; visibility: hidden;"></iframe>
    </noscript>

    <main class="page-wrapper">
      <!-- Navbar for Food Delivery Service demo-->
      <!-- Remove "navbar-sticky" class to make navigation bar scrollable with the page.-->
      <header class="navbar d-block navbar-sticky navbar-expand-lg navbar-light bg-light">
        <div class="container">
          <div class="navbar-toolbar d-flex align-items-center order-lg-3">
<!--         <div class="navbar-tool-icon-box"></div></a>-->
            <div class="navbar-tool dropdown ms-3">

                <a class="navbar-tool-icon-box bg-secondary dropdown-toggle " href="food-delivery-cart.html">
                    <span class="navbar-tool-label">{{num_of_orders}}</span>
                        <img src="{% static 'images/cart-check.svg' %}" width="40px" height="50px">
<!--                        <img src="{% static 'images/cart-check-fill.svg' %}" width="40px" height="50px">-->
                    <i class="bi bi-cart-check-fill"></i>
<!--                    <i class="bi bi-cart-check-fill"></i>-->
                </a>
              <!-- Cart dropdown-->
              <div class="dropdown-menu dropdown-menu-end">
                <div class="widget widget-cart px-3 pt-2 pb-3" style="width: 20rem;">
                  <div style="height: 15rem;" data-simplebar data-simplebar-auto-hide="false">

                      {% for i in all_items %}


                                <div class="widget-cart-item py-2 border-bottom">
                                  <a class="btn-close text-danger" href="{{i.get_absolute_url_delete}}"  aria-label="Remove">
                                      <span aria-hidden="true">&times;</span>
                                  </a>
                                  <div class="d-flex align-items-center">
                                      <a class="d-block" href="{% url 'webapp3:Cart' %}">
                                          <img src="{{i.item_image.url}}" width="64" alt="Pizza">
                                      </a>
                                            <div class="ps-2">
                                                <h6 class="widget-product-title">
                                                    <a href="#">{{i.item_title}}</a>
                                                    </h6>
                                                <div class="widget-product-meta">
                                                    <span class="text-accent me-2">${{i.item_price}}.</span>
                                                    <span class="text-muted">x {{i.item_quantity}}</span>
                                                </div>
                                            </div>
                                  </div>
                                </div>


                    {% endfor %}

                  </div>


                  <div class="d-flex flex-wrap justify-content-between align-items-center py-3">
                    <div class="fs-sm me-2 py-2"><span class="text-muted">Total:</span><span class="text-accent fs-base ms-1">${{Total_cost}}</span></div><a class="btn btn-outline-secondary btn-sm" href="food-delivery-cart.html">Expand cart<i class="ci-arrow-right ms-1 me-n1"></i></a>
                  </div><a class="btn btn-primary btn-sm d-block w-100" href=""><i class="ci-card me-2 fs-base align-middle"></i>Checkout</a>
                </div>
              </div>
            </div>
          </div>

            <ul class="navbar-nav">
              <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Cuisine</a>
                <div class="dropdown-menu px-2 ps-0 pb-4">
                  <div class="d-flex">
                    <div class="mega-dropdown-column pt-4 px-3" style="width: 12rem;">
                      <div class="widget mb-3"><a class="d-block" href="food-delivery-category.html"><img class="d-block mx-auto mb-3" src="{% static 'images/burger.svg' %}" width="60" alt="Burgers &amp; Fries">
                          <h6 class="fs-base text-center">Burgers &amp; Fries</h6></a></div>
                    </div>
                    <div class="mega-dropdown-column pt-4 px-3" style="width: 12rem;">
                      <div class="widget mb-3"><a class="d-block" href="food-delivery-category.html"><img class="d-block mx-auto mb-3" src="{% static 'images/noodles.svg' %}" width="60" alt="Noodles">
                          <h6 class="fs-base text-center">Noodles</h6></a></div>
                    </div>
                    <div class="mega-dropdown-column pt-4 px-3" style="width: 12rem;">
                      <div class="widget mb-3"><a class="d-block" href="food-delivery-category.html"><img class="d-block mx-auto mb-3" src="{% static 'images/pizza.svg' %}" width="60" alt="Pizza &amp; Pasta">
                          <h6 class="fs-base text-center">Pizza &amp; Pasta</h6></a></div>
                    </div>
                  </div>
                  <div class="d-flex">
                    <div class="mega-dropdown-column pt-4 px-3" style="width: 12rem;">
                      <div class="widget mb-3"><a class="d-block" href="food-delivery-category.html"><img class="d-block mx-auto mb-3" src="{% static 'images/steak.svg' %}" width="60" alt="Grill &amp; Steaks">
                          <h6 class="fs-base text-center">Grill &amp; Steaks</h6></a></div>
                    </div>
                    <div class="mega-dropdown-column pt-4 px-3" style="width: 12rem;">
                      <div class="widget mb-3"><a class="d-block" href="food-delivery-category.html"><img class="d-block mx-auto mb-3" src="{% static 'images/fish.svg' %}" width="60" alt="Fish &amp; Seafood">
                          <h6 class="fs-base text-center">Fish &amp; Seafood</h6></a></div>
                    </div>
                    <div class="mega-dropdown-column pt-4 px-3" style="width: 12rem;">
                      <div class="widget mb-3"><a class="d-block" href="food-delivery-category.html"><img class="d-block mx-auto mb-3" src="{% static 'images/healthy.svg' %}" width="60" alt="Healthy Food">
                          <h6 class="fs-base text-center">Healthy Food</h6></a></div>
                    </div>
                  </div>
                  <div class="d-flex">
                    <div class="mega-dropdown-column pt-4 px-3" style="width: 12rem;">
                      <div class="widget mb-3"><a class="d-block" href="food-delivery-category.html"><img class="d-block mx-auto mb-3" src="{% static 'images/cuisine.svg' %}" width="60" alt="Haute Cuisine">
                          <h6 class="fs-base text-center">Haute Cuisine</h6></a></div>
                    </div>
                    <div class="mega-dropdown-column pt-4 px-3" style="width: 12rem;">
                      <div class="widget mb-3"><a class="d-block" href="food-delivery-category.html"><img class="d-block mx-auto mb-3" src="{% static 'images/chicken.svg' %}" width="60" alt="Chicken &amp; Snaks">
                          <h6 class="fs-base text-center">Chicken &amp; Snaks</h6></a></div>
                    </div>
                    <div class="mega-dropdown-column pt-4 px-3" style="width: 12rem;">
                      <div class="widget mb-3"><a class="d-block" href="food-delivery-category.html"><img class="d-block mx-auto mb-3" src="{% static 'images/coffee.svg' %}" width="60" alt="Coffee &amp; Desserts">
                          <h6 class="fs-base text-center">Coffee &amp; Desserts</h6></a></div>
                    </div>
                  </div>
                </div>
              </li>

            </ul>
          </div>
        </div>

      </header>
      <div class="container pt-4 pb-3 py-sm-4">

        <div class="rounded-3 shadow-lg mt-4 mb-5">
          <ul class="nav nav-tabs nav-justified mb-sm-4">
            <li class="nav-item"><a class="nav-link fs-lg fw-medium py-4" href="{% url 'webapp3:Cart' %}">1. Your order</a></li>
            <li class="nav-item"><a class="nav-link fs-lg fw-medium py-4 active" href="{% url 'webapp3:Checkout' %}">2. Checkout</a></li>
          </ul>


          <form class="needs-validation px-3 px-sm-4 px-xl-5 pt-sm-1 pb-4 pb-sm-5"  action="{% url 'webapp3:Checkout' %}" method="post">
            <div class="row pb-4 pt-3">
                {% csrf_token %}
                {% for field in form_check %}
                      <div class="col-sm-6 mb-4">
<!--                        <label class="form-label" for="fd-name">Your name<sup class="text-danger ms-1">*</sup></label>-->
<!--                        <input class="form-control" type="text" required id="fd-name">-->
<!--                        <div class="invalid-feedback">Please enter your name!</div>-->

                                            {{field.label}}
                                             {{field.errors}}
                                            {% render_field field class="form-control" %}

                      </div>


            {% endfor %}


              <div class="col-sm-6">
                <div class="d-fle flex-column h-100 rounded-3 bg-secondary px-3 px-sm-4 py-4">
                  <h2 class="h5 pb-3">Your total</h2>
                  <div class="d-flex justify-content-between fs-md border-bottom pb-3 mb-3"><span>Subtotal:</span><span class="text-heading">${{Total_cost}}</span></div>
                  <div class="d-flex justify-content-between fs-md border-bottom pb-3 mb-3"><span>Delivery:</span><span class="text-heading">${{Delivery_tax}}</span></div>
                  <div class="d-flex justify-content-between fs-md mb-2"><span>Total:</span><span class="text-heading fw-medium">{{Final_cost}}</span></div>
                </div>
              </div>
            </div>
              <input type="submit" value="Complete order" class="btn btn-primary d-block w-60 mt-4">


            <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
var options = {
    "key": "{{api_key}}", // Enter the Key ID generated from the Dashboard
    "amount": "{{amount}}", // Amount is in currency subunits. Default currency is INR. Hence, 50000 refers to 50000 paise
    "currency": "INR",
    "name": "Acme Corp",
    "description": "Test Transaction",

    "order_id": "{{order_id}}", //This is a sample Order ID. Pass the `id` obtained in the response of Step 1
    "handler": function (response){
        alert(response.razorpay_payment_id);
        alert(response.razorpay_order_id);
        alert(response.razorpay_signature)
    },
    "prefill": {
        "name": {{name}},
        "email": {{email}},
        "contact": {{mobile}}
    },
    "notes": {
        "address": "Razorpay Corporate Office"
    },
    "theme": {
        "color": "#3399cc"
    }
};

var rzp1 = new Razorpay(options);
rzp1.on('payment.failed', function (response){
        alert(response.error.code);
        alert(response.error.description);
        alert(response.error.source);
        alert(response.error.step);
        alert(response.error.reason);
        alert(response.error.metadata.order_id);
        alert(response.error.metadata.payment_id);
});
document.getElementById('rzp-button1').onclick = function(e){
    rzp1.open();
    e.preventDefault();
}
</script>








          </form>
        </div>
      </div>
    </main>

<footer class="footer bg-darker pt-5">
      <div class="container pt-2">
        <div class="row pb-2">
          <div class="col-lg-2 col-sm-4 pb-2 mb-4">
 <div class="mt-n1"><img class="d-block mb-4" src="{% static 'images/Logo.png' %}" width="117" alt="Cartzilla"></div>
            <div class="btn-group dropdown disable-autohide">
<!--              <button class="btn btn-outline-light border-light btn-sm dropdown-toggle px-2" type="button" data-bs-toggle="dropdown"><img class="me-2" src="./saved_resorce_files/en.png" width="20" alt="English">Eng / $</button>-->
              <ul class="dropdown-menu my-1">

                <li><a class="dropdown-item pb-1" href=""><img class="me-2" src="./saved_resorce_files/fr.png" width="20" alt="Français">Français</a></li>
                <li><a class="dropdown-item pb-1" href="#"><img class="me-2" src="./saved_resorce_files/de.png" width="20" alt="Deutsch">Deutsch</a></li>
                <li><a class="dropdown-item" href=""><img class="me-2" src="./saved_resorce_files/it.png" width="20" alt="Italiano">Italiano</a></li>
              </ul>
            </div>
          </div>
          <div class="col-lg-2 col-sm-4">
            <div class="widget widget-links widget-light pb-2 mb-4">
              <h3 class="widget-title text-light">Join us</h3>
              <ul class="widget-list">
                <li class="widget-list-item"><a class="widget-list-link" href="">Careers</a></li>
                <li class="widget-list-item"><a class="widget-list-link" href="">Restaurants</a></li>
                <li class="widget-list-item"><a class="widget-list-link" href="">Become a Courier</a></li>
                <li class="widget-list-item"><a class="widget-list-link" href="">About</a></li>
              </ul>
            </div>
          </div>
          <div class="col-lg-2 col-sm-4">
            <div class="widget widget-links widget-light pb-2 mb-4">
              <h3 class="widget-title text-light">Let us help you</h3>
              <ul class="widget-list">
                <li class="widget-list-item"><a class="widget-list-link" href="">Help Center</a></li>
                <li class="widget-list-item"><a class="widget-list-link" href="">Support</a></li>
                <li class="widget-list-item"><a class="widget-list-link" href="">Contacts</a></li>
              </ul>
            </div>
          </div>
          <div class="col-lg-2 col-sm-4">
            <div class="widget widget-links widget-light pb-2 mb-4">
              <h3 class="widget-title text-light">Follow us</h3>
              <ul class="widget-list">
                <li class="widget-list-item"><a class="widget-list-link" href="">Facebook</a></li>
                <li class="widget-list-item"><a class="widget-list-link" href="">Twitter</a></li>
                <li class="widget-list-item"><a class="widget-list-link" href="">Instagram</a></li>
              </ul>
            </div>
          </div>
          <div class="col-lg-4 col-sm-8">
            <div class="widget pb-2 mb-4">
              <h3 class="widget-title text-light pb-1">Download our app</h3>
              <div class="d-flex flex-wrap"><a class="btn-market btn-apple border border-light me-3 mb-2" href="" role="button"><span class="btn-market-subtitle">Download on the</span><span class="btn-market-title">App Store</span></a><a class="btn-market btn-google border border-light mb-2" href="https://cartzilla.createx.studio/home-food-delivery.html#" role="button"><span class="btn-market-subtitle">Download on the</span><span class="btn-market-title">Google Play</span></a></div>
            </div>
          </div>
        </div>
        <hr class="hr-light mt-md-2 mb-3">
        <div class="d-md-flex justify-content-between pt-4 pb-1">
          <div class="pb-4 fs-xs text-light opacity-50 text-center text-md-start">© All rights reserved. Made by Nsoft</a></div>
          <div class="widget widget-links widget-light pb-4">
            <ul class="widget-list d-flex flex-wrap justify-content-center justify-content-md-start">
              <li class="widget-list-item ms-4"><a class="widget-list-link fs-ms" href="">Privacy Policy</a></li>
              <li class="widget-list-item ms-4"><a class="widget-list-link fs-ms" href="">Terms &amp; Conditions</a></li>
              <li class="widget-list-item ms-4"><a class="widget-list-link fs-ms" href="">Cookies Policy</a></li>
            </ul>
          </div>
        </div>
      </div>
    </footer>

    <!-- Toolbar for handheld devices (Food delivery)-->
    <div class="handheld-toolbar">
      <div class="d-table table-layout-fixed w-100"><a class="d-table-cell handheld-toolbar-item" href="#signin-modal" data-bs-toggle="modal"><span class="handheld-toolbar-icon"><i class="ci-user"></i></span><span class="handheld-toolbar-label">Account</span></a><a class="d-table-cell handheld-toolbar-item" href="javascript:void(0)" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" onclick="window.scrollTo(0, 0)"><span class="handheld-toolbar-icon"><i class="ci-menu"></i></span><span class="handheld-toolbar-label">Menu</span></a><a class="d-table-cell handheld-toolbar-item" href="food-delivery-cart.html"><span class="handheld-toolbar-icon"><i class="ci-cart"></i><span class="badge bg-primary rounded-pill ms-1">3</span></span><span class="handheld-toolbar-label">$24.00</span></a></div>
    </div>
    <!-- Back To Top Button--><a class="btn-scroll-top" href="#top" data-scroll><span class="btn-scroll-top-tooltip text-muted fs-sm me-2">Top</span><i class="btn-scroll-top-icon ci-arrow-up">   </i></a>
    <!-- Vendor scrits: js libraries and plugins-->
    <script src="vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="vendor/simplebar/dist/simplebar.min.js"></script>
    <script src="vendor/tiny-slider/dist/min/tiny-slider.js"></script>
    <script src="vendor/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>
    <!-- Main theme script-->
    <script src="js/theme.min.js"></script>







  </body>
</html>