{% extends "layouts/layout.html.twig" %}

{% block content %}

    <div id="loading" class="hidden">#..</div>

    <h1>{{ page_title }}</h1>

    <div class="order-tabs">
        <div class="order-tab active">
            <a href="javascript:void(0);">
                <strong>Stap 1 - </strong>
                Winkelwagen
            </a>
        </div>
        <div class="order-tab {{ shopping_cart|length <= 0 ? 'disabled' : '' }}">
            <a href="{{ shopping_cart|length >= 1 ? urls.customer_details : 'javascript:void(0);' }}">
                <strong>Stap 2 - </strong>
                Uw gegevens
            </a>
        </div>
        <div class="order-tab {{ transaction is defined and shopping_cart|length >= 1 ? '' : 'disabled' }}">
            <a href="{{ transaction is defined and shopping_cart|length >= 1  ? urls.checkout : 'javascript:void(0);' }}">
                <strong>Stap 3 - </strong>
                Bevestigen en betalen
            </a>
        </div>
        <div class="order-tab disabled">
            <a href="javascript:void(0);">
                <strong>Stap 4 - </strong>
                Bestelling geplaatst
            </a>
        </div>
    </div>

    {% include 'blocks/flash_messages.html.twig' %}

    {% if transaction is defined and transaction.status == 'CONFIRMED' %}
        <div class="alert alert-warning">
            De bestelling is al bevestigd. U kunt deze gegevens daarom niet meer aanpassen, maar alleen lezen: <a href="{{ urls.checkout }}">klik hier om te betalen</a>.
        </div>
    {% endif %}

    <div class="shopping-bag col-12 no-padding">

        {% if shopping_cart|length < 1 %}

            <div class="alert alert-info center">
                <span>Uw winkelwagen is leeg</span>
            </div>

        {% else %}

            <div class="col-12 shopping-bag-heading">
                <div class="col-md-6 offset-md-1 col-sm-5 col-5">
                    <strong>Product(en)</strong>
                </div>
                <div class="col-md-2 col-sm-3 col-3">
                    <strong>Aantal</strong>
                </div>
                <div class="col-md-1 col-sm-2 col-2 text-right">
                    <strong>Stukprijs</strong>
                </div>
                <div class="col-md-2 col-sm-2 col-2 text-right">
                    <strong>Prijs</strong>
                </div>
            </div>

            <div class="col-12 shopping-bag-content no-padding">
                {% for order_product in shopping_cart %}
                    <!--
                    Twig helper variables for easy data access
                    ------------------------------------------>
                    <!-- Product details -->
                    {% set store_product = order_product.store_product %}
                    {% set product = store_product.product %}
                    <!-- Product translation -->
                    {% set product_translation = attribute(product.translations, locale_id) %}
                    {% if product_translation is null %}
                        {% set product_translation = product.translations|first %}
                    {% endif %}
                    <!-- Product price -->
                    {% set product_price = attribute(store_product.price_details, order_product.supplier_id) %}
                    <!-- Product shipping details -->
                    {% set product_shipping_details = attribute(product_price.shipping_costs, shipping_country_id) %}

                    <div class="{{ store_product.id }} shopping-bag-item fill">
                        <div class="col-md-1 d-none d-md-flex no-padding">
                            <img src="{{ product.images|length > 0 and product.images.thumbnail.url ? product.images.thumbnail.url : '/images/no_image.png' }}"
                                 alt="{{ product_translation.name }}">
                        </div>
                        <div class="col-md-6 col-sm-5 col-5">
                            <strong><a href="{{ urls.product ~ store_product.id ~ '/' ~ product_translation.name|url_encode }}">{{ product_translation.name }}</a></strong>
                            <br>

                            {% if product_price.supplier_stock is defined and product_price.supplier_stock > 0 %}

                                {% if order_product.quantity > product_price.supplier_stock %}
                                    <div class="badge badge-warning">Niet genoeg op voorraad, langere levertijd</div>
                                {% else %}
                                    <div class="badge badge-success">
                                        {% if product_price.supplier_stock > 10 %}
                                            <div class="badge badge-success">Ruimschoots op voorraad</div>
                                        {% else %}
                                            <div class="badge badge-success">Op voorraad</div>
                                        {% endif %}
                                    </div>
                                {% endif %}

                                {% if product_shipping_details.shipping_days %}
                                    <div class="badge badge-info">Levertijd {{ product_shipping_details.shipping_days }}
                                        werkdag(en)
                                    </div>
                                {% else %}
                                    <div class="badge badge-info">Levertijd 1-3 werkdag(en)</div>
                                {% endif %}
                            {% else %}
                                <div class="badge badge-warning">Dit product is niet op voorraad</div>
                            {% endif %}

                            <table class="product-id-table">
                                {#<tr>#}
                                    {#<th>EAN</th>#}
                                    {#<td>{{ order_product.product.ean }}</td>#}
                                {#</tr>#}
                                <tr>
                                    <th>SKU</th>
                                    <td>{{ product.sku }}</td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-2 col-sm-3 col-3">
                            <input class="product-quantity col-5 no-padding" type="text" data-truevalue="{{ order_product.quantity }}"
                                   value="{{ order_product.quantity }}" disabled/>

                            {% if transaction is not defined or transaction.status != 'CONFIRMED' %}

                                <a href="javascript:void(0);" id="{{ store_product.id }}"
                                   data-piece-price="{{ (product_price.total_price_in) }}"
                                   class="cart-add-product" data-quantity="1"><span class="fa fa-plus"></span></a>
                                <a href="javascript:void(0);" id="{{ store_product.id }}"
                                   class="cart-remove-product" data-quantity="-1"><span class="fa fa-minus"></span></a>

                            {% endif %}
                        </div>
                        <div class="col-md-1 col-sm-2 col-2 text-right">
                            &euro;&nbsp;<span class="product-piece">{{ (product_price.total_price_in)|number_format(2, ',', '.') }}</span>
                        </div>
                        <div class="col-md-2 col-sm-2 col-2 text-right">
                            &euro;&nbsp;<span class="product-subtotal">{{ (product_price.total_price_in * order_product.quantity)|number_format(2, ',', '.') }}</span>
                        </div>

                        {% if transaction is not defined or transaction.status != 'CONFIRMED' %}

                            <a href="javascript:void(0);" id="{{ store_product.id }}" class="cart-empty-product" data-quantity="-{{ order_product.quantity }}">
                                <span title="Verwijder product" class="fa fa-times-circle"></span></a>

                        {% endif %}
                    </div>
                {% endfor %}
            </div>

            <div class="col-sm-7 offset-sm-5 col-md-5 offset-md-7 shopping-bag-footer no-padding">
                <div class="subtotal fill">
                    <p class="float-left">Subtotaal (incl. BTW)</p>
                    <p class="text-right">
                        &euro;&nbsp;<span class="subtotal-cost">{{ shopping_cart_overview.subtotal_price|number_format(2, ',', '.') }}</span>
                    </p>
                </div>
                <div class="shipping-costs fill">
                    <p class="float-left">Verzendkosten</p>
                    <p class="text-right">
                        &euro;&nbsp;<span class="shipping-cost">{{ shopping_cart_overview.shipping_costs|number_format(2, ',', '.') }}</span>
                    </p>
                </div>
                <div class="total fill">
                    <p class="float-left bold">Totaal</p>
                    <h4 class="text-right">
                        &euro;&nbsp;<span class="total-cost">{{ shopping_cart_overview.total_price|number_format(2, ',', '.') }}</span>
                    </h4>
                </div>
                <div class="next-step fill">
                    {% if transaction is defined and transaction %}
                        <button onclick="location.href='{{ urls.checkout }}'" class="btn btn btn-block btn-primary">Naar afrekenen <span
                                    class="glyphicon glyphicon-shopping-cart"></span></button>
                    {% else %}
                        <button onclick="location.href='{{ urls.customer_details }}'" class="btn btn btn-block btn-primary customer-link">Naar klantgegevens <span
                                    class="glyphicon glyphicon-shopping-cart"></span></button>
                    {% endif %}
                </div>
            </div>
        {% endif %}
    </div>

{% endblock %}

{% block post_js %}
    {{ parent() }}
    {% include 'blocks/ajax_shoppingcart.html.twig' %}
{% endblock %}