checkout.html

{% extends "layout.html" %}
{% block content %}
<div class="container ce">
   <div class="row">
      <div class="col-lg-3 col-12 sidebar">
         {% include "header_2.html" %}
         {{ modules|raw }}
      </div>
      <div class="col-lg-9 col-12 mainbar mt-lg-0 mt-2">
         <div class="basket position-relative mb-2 p-4">
            <h4 class="mb-1"><i class="fa-solid fa-basket-shopping me-1"></i>{{ __("Your Basket") }}</h4>
            <div class="row second-line">
               <div class="col-12">
                  <div class="checkout">
                     <div class="packages">
                        {% for package in basket.packages %}
                        <form method="post" action="/checkout/update" id="package--{{package.id}}" class="package p-3 mt-2 d-flex justify-content-between align-items-center">
                           <div class="d-flex justify-content-start align-items-center">
                              <div class="img-holder me-2">
                                 <img src="{{ package.image.url }}" alt="">
                              </div>
                              <div class="pack-info">
                                 <span class="big">{{package.name[:20] }}</span>
                                 <div class="sml">
                                    {% if package.discount.applied %}
                                    <del class="text-danger small font-weight-bold discount">
                                    {{ package.discount.original|money }}
                                    </del>
                                    {% endif %}
                                    {%if package.disableQuantity %}
                                    <span class="price-actual">{{ package.price|money }} <small>{{ basket.currency }}</small></span>
                                    {%else%}
                                    <span class="price-actual">{{ package.quantity * package.price|money }} <small>{{ basket.currency }}</small></span>
                                    {%endif%}
                                 </div>
                              </div>
                           </div>
                           <div class="package-buttons d-flex justify-content-end align-items-center">
                              <div class="d-flex justify-content-center align-items-center">
                                 
                                 <input class="d-inline form-control package__quantity drop-shadow" type="text"
                                 name="quantity[{{ package.id }}]"
                                 value="{{ package.quantity }}" {% if
                                 package.price==0.00 or
                                 package.disableQuantity
                                 %}disabled="disabled" {% endif %} />
                                  <button class="btn drop-shadow btn-add-1 ms-2"><i class="fa-solid fa-rotate"></i></button>
                              </div>
                              <a href="javascript:void(0);" data-remote="/package/{{ package.id }}"
                                 class="btn btn-info toggle-modal drop-shadow ms-2"><i class="fa-solid fa-info"></i></a>
                              <a href="/checkout/packages/remove/{{ package.id }}"
                                 class="btn btn--remove cursorAura drop-shadow d-flex justify-content-center align-items-center ms-2"><i class="fa-solid fa-trash-can-arrow-up"></i></a>
                           </div>
                        </form>
                        {% endfor %}
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div class="coupons p-4">
            <h4 class="mb-2"><i class="fa-solid fa-gift me-1"></i>{{ __("Redeem coupons / gift cards") }}</h4>
            <div class="coupons">
               <div class="redeem">
                  <form method="post" action="/checkout/basketcoupon/add">
                     <div class="input-group mb-3">
                        <input type="text" name="coupon" placeholder="{{ __("Have a coupon code? Enter it here and click redeem.") }}"
                        class="form-control">
                        <div class="input-group-append">
                           <button class="btn btn-primary">{{ __("Redeem") }} <i class="fa fa-chevron-right"></i></button>
                        </div>
                     </div>
                  </form>
               </div>
            </div>
            {% if basket.coupons|length > 0 %}
               <div class="col-12 col-xl-6">
                  <div class="redeemed mt-4 mt-xl-0">
                     <h4 class=""><i class="fa-solid fa-check-to-slot"></i>{{ __("Redeemed coupons / gift cards") }}</h4>
                     <table class="table table-hover table-striped table-responsive">
                        <tbody>
                           {% for coupon in basket.coupons %}
                           <tr>
                              <td>Coupon Code</td>
                              <td>{{ coupon.code }}</td>
                              <td>{{ coupon.description }}</td>
                              <td>
                                 <a href="/checkout/basketcoupon/remove/{{ coupon.basket_id ?: coupon.code }}"><i class="fas fa-times-circle text-danger"></i></a>
                              </td>
                           </tr>
                           {% endfor %}
                        </tbody>
                     </table>
                  </div>
               </div>
               {% endif %}
         </div>
         
         {% if store.useCheckout %}
            <div class="tebexcheckout mt-2">
               <div class="panel panel-default d-flex drop-shadow">
                  <div class="panel-body is-lhs p-4">
                     <div class="panel-heading">
                        <h4 class="mb-2"><i class="fa-solid fa-wallet me-1"></i>Pay {{ basket.price|money }} {{ basket.currency }}</h4>
                     </div>
                     <p>
                        You will be taken to Tebex Checkout, a secure and trusted
                        payment playform where you can choose to pay with PayPal
                        or a credit/debit card.
                     </p>
                     <div class="secure">
                        <i class="fa-solid fa-lock me-1"></i>
                        <span>SECURE &amp; ENCRYPTED</span>
                        <img src="https://i.imgur.com/k5fyRPQ.png" alt="PayPal or Credit/Debit Card">
                     </div>
                  </div>
                  <div class="panel-body is-rhs p-4 position-relative d-flex justify-content-center align-items-center">
                     <a href="/checkout/pay" class="btn btn-success drop-shadow">
                     PAY {{ basket.price|money }} {{ basket.currency }} NOW
                     <i class="fa-solid fa-right-long"></i>
                     </a>
                     <div class="bg"></div>
                  </div>
               </div>
            </div>
         {% endif %}
         
         
         
      </div>
   </div>
</div>
<div class="bg-cta w-100 d-block">
   {% include "content_footer.html" %}
</div>
{% endblock %}