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

{% set products = craft.products.limit(5).all() %}

{% block main %}
    <h1>Products</h1>

    <form method="post" class="text-center">
        <input type="hidden" name="action" value="commerce/cart/update-cart">
        <input type="hidden" name="cartUpdatedNotice" value="Multiple items added to the cart.">
        {{ redirectInput('shop/cart') }}
        {{ csrfInput() }}
        {% for product in products if product.defaultVariant.isAvailable %}
            <input type="hidden" name="purchasables[{{ loop.index }}][id]" value="{{ product.defaultVariant.id }}">
            <input type="hidden" name="purchasables[{{ loop.index }}][qty]" value="1">
            <input type="hidden" name="purchasables[{{ loop.index }}][note]" value="">
            <input type="hidden" name="purchasables[{{ loop.index }}][options]" value="">
        {% endfor %}
        <input type="submit" value="Add all products to cart" />
    </form>

    {% for product in products %}
        <div class="md:flex product bg-white mb-4 p-8 rounded items-center text-left">
            <div class="md:w-1/6 md:p-4">
                {% include "shop/_images/product" with { number: '3' } %}
            </div>
            <div class="md:w-3/6 md:p-4">
                <h3 class="font-semibold">{% if product.url %}{{ product.link }}{% else %}{{ product.title }}{% endif %}</h3>
                {% if product.getVariants()|length %}
                    <form method="post" class="add-to-cart-form">
                        <input type="hidden" name="action" value="commerce/cart/update-cart">
                        <input type="hidden" name="cartUpdatedNotice" value="Added {{ product.title }} to the cart.">
                        {{ redirectInput('shop/cart') }}
                        <input type="hidden" name="qty" value="1">
                        {{ csrfInput() }}

                        <select name="options[giftWrapped]">
                            <option value="no">No gift wrap.</option>
                            <option value="yes">Gift wrapped.</option>
                        </select>

                        {% for purchasable in product.getVariants() %}
                            <div class="p-2 pl-0 mt-1 pb-6">
                                <span class="rounded-full bg-gray-500 uppercase px-2 py-1 text-gray-100 mr-2">{{ purchasable.sku }}</span>
                                {{ purchasable.description }}

                                {% if purchasable.onSale %}
                                    <span class="line-through">{{ purchasable.price|commerceCurrency(cart.currency) }}</span>
                                {% endif %}
                                <strong>{{ purchasable.salePrice|commerceCurrency(cart.currency) }}</strong>

                                <button {{ purchasable.isAvailable ? '' : 'disabled' }} class="js-purchasableId float-right" type="submit" name="purchasableId" value="{{ purchasable.id }}">{{ purchasable.isAvailable ? 'Add to cart' : 'Unavailable' }}</button>

                                <div>
                                    <strong>Stock:</strong>
                                    {% if purchasable.hasUnlimitedStock %}Unlimited{% else %}{{ purchasable.stock }} Remaining{% endif %}
                                </div>

                                <div>
                                    {% for sale in purchasable.sales %}
                                        {% if loop.first %}<strong>Sales:</strong>{% endif %}
                                        <a href="{{ sale.cpEditUrl }}" target="_blank">{{ sale.name }}</a>{% if not loop.last %}, {% endif %}
                                    {% endfor %}
                                </div>

                                <div>
                                    {% if currentUser %}
                                        {% set orders = craft.orders.user(currentUser).isCompleted(true).hasPurchasables(purchasable).all() %}
                                        {% for order in orders %}
                                            {% if loop.first %}<strong>Purchased:</strong>{% endif %}
                                            <a href="/shop/customer/order?number={{ order.number }}" target="_blank">#{{ order.reference|upper }}</a>{% if not loop.last %}, {% else %}<br>{% endif %}
                                        {% endfor %}
                                    {% endif %}
                                </div>
                            </div>
                        {% endfor %}
                    </form>
                {% endif %}
            </div>
        </div>
    {% endfor %}

    {% js %}
        {#
        $('form.add-to-cart-form').submit(function(e){
            e.preventDefault();
            var purchasable = $(this).find('.js-purchasableId').val();
            $.ajax({
                type: "POST",
                dataType: 'json',
                headers: {
                    "X-CSRF-Token" : '{{ craft.app.request.csrfToken }}',
                },
                url: '',
                data: {
                    'action' : 'commerce/cart/update-cart',
                    'purchasableId': purchasable,
                    'note' : 'from ajax'
                },
                success: function(data){
                    console.log(data);
                }
            });
        });
        #}
    {% endjs %}
{% endblock %}