{% extends 'base.html' %}
{% load static %}

{% block content %}

<section class="section-content padding-y bg">
  <div class="container">

    <!-- ============================ COMPONENT 1 ================================= -->
    {% if not cart_items %}
      <h2 class="text-center">Your Shopping Cart is Empty</h2>
      <br>
      <div class="text-center">
        <a href="{% url 'store' %}" class="btn btn-primary">Continue Shopping</a>
      </div>
    {% else %}
      <div class="row">
        <aside class="col-lg-9 col-md-8 col-sm-12 mb-4">
          <div class="card">
            <div class="table-responsive">
              <table class="table table-borderless table-shopping-cart">
                <thead class="text-muted">
                  <tr class="small text-uppercase">
                    <th scope="col">Product</th>
                    <th scope="col" width="120">Quantity</th>
                    <th scope="col" width="120">Price</th>
                    <th scope="col" class="text-right" width="200"> </th>
                  </tr>
                </thead>
                <tbody>

                  {% for cart_item in cart_items %}
                    <tr>
                      <td>
                        <figure class="itemside align-items-center">
                          <div class="aside">
                            <img src="{{ cart_item.product.images.url }}" class="img-fluid img-sm">
                          </div>
                          <figcaption class="info">
                            <a href="{{ cart_item.product.get_url }}" class="title text-dark">{{ cart_item.product.product_name }}</a>
                            <p class="text-muted small">
                              {% if cart_item.variations.all %}
                                {% for item in cart_item.variations.all %}
                                  {{ item.variation_category | capfirst }} : {{ item.variation_value | capfirst }} <br>
                                {% endfor %}
                              {% endif %}
                            </p>
                          </figcaption>
                        </figure>
                      </td>
                      <td>
                        <div class="input-group input-spinner">
                          <div class="input-group-prepend">
                            <a href="{% url 'remove_cart' cart_item.product.id cart_item.id %}" class="btn btn-light" type="button" id="button-plus">
                              <i class="fa fa-minus"></i>
                            </a>
                          </div>
                          <input type="text" class="form-control text-center" value="{{ cart_item.quantity }}">
                          <div class="input-group-append">
                            <form action="{% url 'add_cart' cart_item.product.id %}" method="POST">
                              {% csrf_token %}
                              {% for item in cart_item.variations.all %}
                                <input type="hidden" name="{{ item.variation_category | lower }}" value="{{ item.variation_value | capfirst }}">
                              {% endfor %}
                              <button class="btn btn-light" type="submit" id="button-minus">
                                <i class="fa fa-plus"></i>
                              </button>
                            </form>
                          </div>
                        </div>
                      </td>
                      <td>
                        <div class="price-wrap">
                          <var class="price">$ {{ cart_item.sub_total }}</var>
                          <small class="text-muted"> $ {{ cart_item.product.price }} each </small>
                        </div>
                      </td>
                      <td class="text-right">
                        <a href="{% url 'remove_cart_item' cart_item.product.id cart_item.id %}" onclick="return confirm('Are you sure you want to delete this item?')" class="btn btn-danger">Remove</a>
                      </td>
                    </tr>
                  {% endfor %}

                </tbody>
              </table>
            </div>
          </div>
        </aside>

        <aside class="col-lg-3 col-md-4 col-sm-12">
          <div class="card">
            <div class="card-body">
              <dl class="dlist-align">
                <dt>Total price:</dt>
                <dd class="text-right">$ {{total}}</dd>
              </dl>
              <dl class="dlist-align">
                <dt>Tax:</dt>
                <dd class="text-right">$ {{tax}}</dd>
              </dl>
              <dl class="dlist-align">
                <dt>Grand Total:</dt>
                <dd class="text-right text-dark b"><strong>$ {{grand_total}}</strong></dd>
              </dl>
              <hr>
              <p class="text-center mb-3">
                <img src="{% static './images/misc/payments.png' %}" height="26">
              </p>
              <a href="{% url 'checkout' %}" class="btn btn-primary btn-block mb-2">Checkout</a>
              <a href="{% url 'store' %}" class="btn btn-light btn-block">Continue Shopping</a>
            </div>
          </div>
        </aside>
      </div>
    {% endif %}
    <!-- ============================ COMPONENT 1 END .// ================================= -->

  </div>
</section>

{% endblock %}