{% extends "vend/_layouts/settings" %}

{% import "_includes/forms" as forms %}

{% from "vend/_includes/macros.html" import configWarning %}

{% block content %}

    {% if oauthAppMissing %}
        <p>You are not connected to Vend, <a href="{{ url('oauthclient/apps') }}">please connect to your Vend store</a> first.</p>
    {% elseif not oauthToken or not oauthProvider %}
        <p>Your OAuth app needs a token generating, you can do this <a href="{{ url('oauthclient/apps') }}">here</a>.</p>
    {% endif %}

    {% if not oauthAppMissing and oauthToken and oauthProvider %}
        <h2>{{ "Shipping Settings"|t('vend') }}</h2>

        <form action="" method="post" accept-charset="UTF-8" data-saveshortcut>
            <input type="hidden" name="action" value="vend/settings/save-shipping">
            {{ redirectInput('vend/settings/shipping') }}
            {{ csrfInput() }}

            {% set params = {
                label: 'Shipping Product Type'|t,
                instructions: 'Choose the Vend Product Type that contains your shipping products.'|t,
                id: 'shippingMap-productType',
                name: 'shippingMap[productType]',
                options: vendProductTypes,
                value: settings.shippingMap and settings.shippingMap.productType is defined ? settings.shippingMap.productType : null,
                required: true,
            } %}

            {% set input %}
                {{ forms.select(params) }}
                <div id="vendShippingProductType-spinner" class="spinner hidden"></div>
            {% endset %}

            {{ forms.field(params, input) }}

            <div id="shippingMapFields"{% if not settings.shippingMap %} class="hidden"{% endif %}>
                <hr>

                <p>For each Commerce shipping rule, choose the Vend shipping product and sales tax that you want it to match.</p>

                <table class="fullwidth data">
                    <thead>
                        <tr>
                            <th>Shipping Rule</th>
                            <th>Vend Product</th>
                            <th>Price Excluding Tax</th>
                            <th>Vend Sales Tax</th>
                            <th>Tax Amount</th>
                            <th>Total Price</th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for shippingRule in shippingRules %}
                        <tr>
                            <th>{{ shippingRule.name }}</th>
                            <td>
                                {{ forms.selectField({
                                    id: 'shippingMap-rules-'~shippingRule.id~'-productId',
                                    name: 'shippingMap[rules]['~shippingRule.id~'][productId]',
                                    fieldClass: 'products',
                                    value: settings.shippingMap and settings.shippingMap.rules[shippingRule.id].productId is defined ? settings.shippingMap.rules[shippingRule.id].productId : null,
                                    options: productOptions ? productOptions : [],
                                    required: true,
                                }) }}
                            </td>
                            <td class="price">
                                {% set productPrice = null %}
                                {% set currencyIso = craft.commerce.paymentCurrencies.getPrimaryPaymentCurrencyIso() %}
                                {% if settings.shippingMap and settings.shippingMap.rules[shippingRule.id].productPrice is defined %}
                                    {% set productPrice = settings.shippingMap.rules[shippingRule.id].productPrice %}
                                    {{ productPrice.excludingTax|commerceCurrency(currencyIso) }}
                                {% endif %}
                            </td>
                            <td>
                                {{ forms.selectField({
                                    id: 'shippingMap-rules-'~shippingRule.id~'-taxId',
                                    name: 'shippingMap[rules]['~shippingRule.id~'][taxId]',
                                    value: settings.shippingMap and settings.shippingMap.rules[shippingRule.id].taxId is defined ? settings.shippingMap.rules[shippingRule.id].taxId : null,
                                    options: vendTaxes,
                                    required: true,
                                }) }}
                            </td>
                            <td class="price">
                                {% if productPrice %}
                                    {{ (productPrice.includingTax - productPrice.excludingTax)|commerceCurrency(currencyIso) }}
                                {% endif %}
                            </td>
                            <td class="price">
                                {% if productPrice %}
                                    {{ productPrice.includingTax|commerceCurrency(currencyIso) }}
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>

                <br>
                <input type="submit" class="btn submit" value="{{ 'Save'|t('vend') }}">
            </div>
        </form>
    {% endif %}
{% endblock %}

{% js %}
    var $productTypeInput = $("#shippingMap-productType"),
        $spinner = $('#vendShippingProductType-spinner'),
        $shippingMapFields = $('#shippingMapFields');

    $productTypeInput.change(function(e) {
        var typeId = $(this).val();

        $spinner.removeClass('hidden');

        var data = {
            'typeId': typeId
        };
        Craft.postActionRequest('vend/settings/get-shipping-products', data, function(response, textStatus) {
            $spinner.addClass('hidden');
            if (textStatus === 'success') {

                $.each($shippingMapFields.find('.field.products'), function(index, field) {
                    var $select = $(field).find('select');
                    $select.html('');
                    $(field).parents('tr').find('td.price').text('');
                    for (var i = 0; i < response.products.length; i++) {
                        $('<option value="'+response.products[i].value+'">'+response.products[i].label+'</option>').appendTo($select);
                    }
                });

                $shippingMapFields.removeClass('hidden');
            }
        });

    });
{% endjs %}