{% extends 'shop/_layouts/main' %}
{% block main %}

{% for product in craft.commerce.products.limit(5).find() %}
    <div class="row product">
        <div class="two columns">
            {% include "shop/_images/product" with { class: 'u-max-full-width' } %}
        </div>
        <div class="ten columns">
            <h5>{% if product.url %}{{ product.link }}{% else %}{{ product.title }}{% endif %}</h5>
            {% if product.variants|length %}
                <form method="POST">
                    <input type="hidden" name="action" value="commerce/cart/updateCart">
                    <input type="hidden" name="redirect" value="shop/cart">
                    <input type="hidden" name="qty" value="1">
                    {{ getCsrfInput() }}

                    <select name="purchasableId" class="purchasableId">
                        {%- for purchasable in product.variants -%}
                            <option {% if purchasable.stock <= 0 and purchasable.unlimitedStock == false %}disabled {% endif %}
                                    data-info="product-{{ product.id }}-purchasable-{{ purchasable.id }}"
                                    value="{{ purchasable.purchasableId }}">
                                    {{ purchasable.description }} {{ purchasable.salePrice|commerceCurrency(cart.currency) }}
                            </option>
                        {%- endfor -%}
                    </select>

                    <select name="options[giftWrapped]">
                        <option value="no">No gift wrap.</option>
                        <option value="yes">Gift wrapped.</option>
                    </select>
                    {% if product.unlimitedStock or (product.unlimitedStock == false and product.totalStock > 0 ) %}
                        <button type="submit">{{ "Add to cart"|t }}</button>
                    {% else %}
                        {{ "Out of Stock"|t }}
                    {% endif %}
                </form>

                {% if currentUser %}
                {% set order = craft.commerce.orders.user(currentUser).hasPurchasables(product.defaultVariant).find() %}
                {% if order|length %}
                    <strong>I already own this product: </strong> <a href="customer/order?orderNumber={{ order[0].number }}">Order #{{ order[0].shortNumber }}</a>
                {% endif %}
                {% endif %}

                {%- for purchasable in product.variants -%}
                    <div id="product-{{ product.id }}-purchasable-{{ purchasable.id }}" class="purchasableInfo" style="display:none;">
                        <strong>Regular Price: </strong><strike>{{ purchasable.price|commerceCurrency(cart.currency) }}</strike><br>
                        <strong>Now: </strong>{{ purchasable.salePrice|commerceCurrency(cart.currency) }}<br>
                        {% if purchasable.salesApplied %}<strong>Sales Applied:</strong><br>{% endif %}
                        <ul>
                            {% for sale in purchasable.salesApplied  %}
                            <li><strong>{{ sale.name }}</strong> {{ sale.description }}</li>
                            {% endfor %}
                        </ul>
                    </div>
                {%- endfor -%}

            {% endif %}
        </div>
    </div>
{% endfor %}
{% includejs %}
    $( ".purchasableId" ).change(function(e) {
        $(".purchasableInfo").hide();
        $("#"+($(this).find(":selected").data('info'))).toggle();
    });
{% endincludejs %}
{% endblock %}