{% extends "vendor/base.html" %}
{% load i18n %}

{% block vendor_content %}
<div class='row mx-md-5 px-md-3'>
  <div class='col-12 mt-4 mb-2'>
    <h2>{% trans 'Shopping Cart' %}</h2>
  </div>
  <div class='col-md-8'>
      {% for item in order_items %}
      <div class="card w-100 border-0 rounded-0 bg-light my-2">
        <div class='card-body'>
          <div class='d-flex flex-row justify-content-between'>
            <a class="text-primary" href="#">
              <h5>{{item.name}}</h5>
            </a>
            <h5>${{ item.total }}</h5>
          </div>
          <span>{{item.offer.description}}</span>
          <p class="font-weight-bolder mt-3 mb-2">{{ item.offer.get_terms_display }}</p>
          <form action="{{ item.offer.remove_from_cart_link }}" method="post">
            {% csrf_token %}
            <button class="btn btn-link p-0" type="submit">{% trans 'Remove' %}</button>
          </form>
        </div>
      </div>
      {% empty %}
        <p>{% trans 'Your shopping cart is empty.' %}</p>
    {% endfor %}
  </div>
  {% if order_items %}
    <div class="col-md-4 order-md-2 mb-4 mt-2">
      <h3 class="d-flex justify-content-between align-items-center mb-3">
        {% trans 'Summary' %}
      </h3>
      <ul class="list-group mb-3 border-0">
        {% if promo_code %}
        <li class="px-0 border-0 d-flex justify-content-between bg-light">
          <div class="text-success">
            <h6 class="my-0">{{promo_code.name}}</h6>
            <small>{{promo_code.description}}</small>
          </div>
          <span class="text-success">-{{ promo_code.amount }}</span>
        </li>
        {% endif %}
        
        {% include "./includes/cost_overview.html" with invoice=invoice future_billing_info=True %}

      </ul>
      {% if order_items and not user.is_anonymous %}
      <a
        href="{% url 'vendor:checkout-account' %}"
        class="btn btn-primary"
        onclick="dataLayer.push({  {% comment %} Details for Google Tag Manager {% endcomment %}
            'event': 'initiate-checkout',
            'user': '{{ user.id }}',
            'invoice_id': '{{ invoice.uuid }}',
            'num_items': '{{ order_items|length }}',
            {% for item in order_items %}
            'item_{{ forloop.counter }}': '{{ item.name }}',
            'item_{{ forloop.counter }}_price': '{{ item.total|default_if_none:"0.00"|floatformat:2 }}',
            {% endfor %}
            'currency': '{{ invoice.get_currency_display }}',
            'total': '{{ invoice.total|default_if_none:"0.00"|floatformat:2 }}'
        });"
      >{% trans 'Proceed to Checkout' %}</a>
      {% else %}
      <a href="#" class="btn btn-primary disabled">{% trans 'Proceed to Checkout' %}</a>
      {% endif %}
      {% if order_items and user.is_anonymous %}
      <p class="mt-3">
        <a href="{% url 'account_login' %}?next={{ request.path }}">{% trans 'Log in' %} </a>{% trans 'or' %} <a href="{% url 'account_signup' %}?next={{ request.path }}">{% trans 'Sign up' %} </a>{% trans 'to checkout' %}
      </p>
      
      {% endif %}
    {% else %}
    <div class="col-sm-12 col-md-4 mb-3">
      <h3 class="">
        {% trans 'Suggestions' %}
      </h3>
      <p><a href="#">{% trans 'See all Paths' %}</a></p>
      <p><a href="#">{% trans 'Pricing' %}</a></p>
    </div>

    {% endif %}


    {% if promo_code %}
    <form class="card p-2">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="{% trans 'Promo code' %}">
        <div class="input-group-append">
          <button type="submit" class="btn btn-secondary">{% trans 'Redeem' %}</button>
        </div>
      </div>
    </form>
    {% endif %}
    </div>
</div>
{% endblock %}
