{% extends "base.html" %}
{% load static %}
{% load grind_filter %}

{% block head_title %}Checkout | {% endblock %}

{% block head %}
<script defer src="https://www.paypal.com/sdk/js?client-id={{PAYPAL_CLIENT_ID}}&currency=USD"></script>
<script type="module" defer src="{% static 'scripts/payment.js' %}"></script>
{% endblock %}

{% block content %}
<article>
    <header>
        <h1>Checkout</h1>
    </header>
    <section class="checkout__address">
        <h3>Shipping address</h3>
        <p>{{shipping_address.email}}</p>
        <address>
            {{shipping_address.first_name}}
            {{shipping_address.last_name}}<br>
            {{shipping_address.street_address_1}}<br>
            {% if shipping_address.street_address_2 %}
                {{shipping_address.street_address_2}}<br>
            {% endif %}
            {{shipping_address.city}}, {{shipping_address.state}}, {{shipping_address.postal_code}}
        </address>
        <a class="action-button" href="{% url 'storefront:checkout-address' %}">Change</a>
    </section>
    <section class="cart__list">
        <h3>Review items</h3>
        {% for item in cart %}
        <div class="cart__item">
        {% with product=item.product %}
            <figure>
                <img src="{{product.get_first_img.image.url}}" alt="{{product.get_first_img.image}}">
            </figure>
            <div>
                <h4>{{product.name}}</h4>
                {% for key, value in item.variations.items %}
                    <p>Grind: <strong>{{ key|get_grind_display }}</strong>, Qty: <strong>{{value.quantity}}</strong></p>
                {% endfor %}
            </div>
            <div class="item__price">
                <p><strong>${{item.price}}</strong></p>
            </div>
        {% endwith %}
        </div>
        {% endfor %}
    </section>
    <section class="cart__summary">
        <h3>Order summary</h3>
        <form action="" method="POST" class="order-create-form">
            {% csrf_token %}
            {{form.as_p}}
        </form>
        <div class="cart__table-wrapper">
            <table class="cart__totals">
                <tr>
                    <td>Subtotal</td>
                    <td>${{cart.get_total_price|floatformat:"2"}}</td>
                </tr>
                {% if cart.coupon %}
                <tr>
                    <td>Coupon</td>
                    <td>{{cart.coupon.discount_value}} {{cart.coupon.get_discount_value_type_display}}</td>
                </tr>
                {% endif %}
                <tr>
                    <td>Shipping</td>
                    <td>${{ cart.get_shipping_cost }}</small></td>
                </tr>
                <tr>
                    <th>Total</th>
                    <td><strong>${{cart.get_total_price_after_discount|floatformat:"2"}}</strong></td>
                </tr>
            </table>
        </div>
        <div id="paypal-button-container"></div>
    </section>
</article>
{% endblock %}
