{% extends "commerce/_layouts/cp" %}

{% set crumbs = [
    { label: "Shipping"|t('commerce'), url: url('commerce/shipping') },
    { label: "Shipping Methods"|t('commerce'), url: url('commerce/shipping/shippingmethods') },
    { label: shippingMethod.getName()|t('commerce'), url: url('commerce/shipping/shippingmethods/'~methodId) },
] %}

{% set selectedSubnavItem = 'shipping' %}

{% set fullPageForm = true %}

{% macro lazyCreateSelect(selectParams, newOptionLabel, modalHeading, html, js, action, successText) %}

    {% from "_includes/forms" import selectField %}
    {{ selectField(selectParams) }}

    {% js %}
    (function () {
        var $select = $('#{{ selectParams.id }}').selectize({
                dropdownParent: 'body'
            });

            var selectize = $select.get(0).selectize;

            selectize.addOption({
                value: 'new',
                text: '{{ newOptionLabel|e("js") }}'
            });

            selectize.on('item_add', function (value, $item) {
                if (value == 'new') {
                    // Not a real option
                    selectize.clear();

                    var $form = $('<form class="modal fitted lazy-create-modal">' +
                        '<div class="header">' +
                            '<h1 class="centeralign">{{ modalHeading }}</h1>' +
                        '</div>' +
                        '<div class="body">' +
                            '{{ html|e("js") }}' +
                        '</div>' +
                        '<div class="footer">' +
                            '<div class="buttons right">' +
                                '<div class="btn cancel-btn">{{ "Cancel"|t('commerce') }}</div>' +
                                '<input type="submit" class="btn submit" value="{{ 'Save'|t('commerce') }}"/>' +
                                '<div class="spinner hidden"/>' +
                            '</div>' +
                        '</div>' +
                    '</form>');

                    var modal = new Garnish.Modal($form, {
                        onHide: function () {
                            modal.destroy();
                            delete modal;
                        }
                    });

                    eval('{{ js|e("js") }}');

                    setTimeout(function () {
                        $form.find('.text:first').focus();

                        modal.updateSizeAndPosition();
                        $form.find('.body:first').on('resize', function () {
                            modal.updateSizeAndPosition();
                        });
                    }, 100);

                    $form.on('submit', function (ev) {
                        ev.preventDefault();
                        $form.find('.spinner').removeClass('hidden');
                        var namespacedData = Garnish.getPostData($form),
                        data = {};

                        for (var name in namespacedData) {
                            data[name.replace(/^new\[([^\]]+)\]/, '$1')] = namespacedData[name];
                        }

                        Craft.postActionRequest('{{ action|e("js") }}', data, function (response, textStatus) {
                            $form.find('.spinner').addClass('hidden');
                            if (textStatus == 'success') {
                                if (response.success) {
                                    Craft.cp.displayNotice('{{ successText|e("js") }}');
                                    selectize.addOption({
                                        value: response.id,
                                        text: response.name,
                                        $order: selectize.order - 1
                                    });
                                    selectize.setValue(response.id);
                                    modal.hide();
                                } else {
                                    Craft.ui.clearErrorsFromField($form.find('.field'));

                                    for (var attribute in response.errors) {
                                        Craft.ui.addErrorsToField($('#new-' + attribute + '-field'), response.errors[attribute]);
                                    }

                                    modal.updateSizeAndPosition();
                                    Garnish.shake($form);
                                }
                            }
                        });
                    });

                    $form.find('.cancel-btn').on('click', function () {
                        modal.hide();
                    });
                }
            });
        })();
    {% endjs %}
{% endmacro %}


{% from _self import lazyCreateSelect %}
{% import "_includes/forms" as forms %}
{% import "commerce/_includes/forms/commerceForms" as commerceForms %}

    {% set tabs = {
        0: {'label':'Rule'|t('commerce'),'url':'#rule-tab'},
        1: {'label':'Conditions'|t('commerce'),'url':'#conditions-tab'},
        2: {'label':'Costs'|t('commerce'),'url':'#costs-tab'}
    } %}

{% block actionButton %}
<div class="btngroup">
    <input type="submit" class="btn submit"
           value="{{ 'Save'|t('commerce') }}">
    {% if shippingRule.id %}
    <div class="btn submit menubtn"></div>
    <div class="menu">
        <ul>
            <li>
                <a class="formsubmit"
                   data-action="commerce/shipping-rules/duplicate"
                   data-confirm="{{ 'Are you sure you want to save this as a new shipping rule?'|t('commerce') }}"
                   data-redirect="{{ 'commerce/shipping/shippingmethods/{methodId}#rules'|hash }}">
                    {{ "Save as a new rule"|t('commerce') }}
                </a>
            </li>

        </ul>
        <hr>
        <ul>
            <li>
                <a class="formsubmit error"
                   data-action="commerce/shipping-rules/delete"
                   data-confirm="{{ 'Are you sure you want to delete this shipping rule?'|t('commerce') }}"
                   data-redirect="{{ 'commerce/shipping/shippingmethods/{methodId}#rules'|hash }}">
                    {{ 'Delete'|t('commerce') }}
                </a>
            </li>
        </ul>
    </div>
        {% endif %}
</div>
{% endblock %}

{% block content %}
    <input type="hidden" name="action" value="commerce/shipping-rules/save">
    <input type="hidden" name="methodId" value="{{ methodId }}">
    {{ redirectInput('commerce/shipping/shippingmethods/'~methodId~'#rules') }}

    {% if shippingRule.id %}<input type="hidden" name="id" value="{{ shippingRule.id }}">{% endif %}

    <div id="rule-tab">
        {{ forms.textField({
            first: true,
            label: "Name"|t('commerce'),
            instructions: "What this shipping rule will be called in the control panel."|t('commerce'),
            id: 'name',
            name: 'name',
            value: shippingRule.name,
            errors: shippingRule.getErrors('name'),
            autofocus: true,
            required: true,
        }) }}

        {{ forms.textField({
            first: true,
            label: "Description"|t('commerce'),
            instructions: "Describe this rule."|t('commerce'),
            name: 'description',
            value: shippingRule.description,
            errors: shippingRule.getErrors('description'),
        }) }}

        {{ forms.lightSwitchField({
            label: "Enable this shipping rule"|t('commerce'),
            id: 'enabled',
            name: 'enabled',
            value: 1,
            on: shippingRule.enabled,
            checked: shippingRule.enabled,
            errors: shippingRule.getErrors('enabled')
        }) }}
    </div>
    <div id="conditions-tab" class="hidden">
        <p>{{ "Filtering conditions which describe to which orders this rule is applicable to. Write 0 to skip a condition."|t('commerce') }}</p>

        {% set shippingZoneSelectParams = {
            label: "Shipping Zone"|t('commerce'),
            instructions: "Select a shipping zone."|t('commerce'),
            id: 'shippingZoneId',
            name: 'shippingZoneId',
            value: shippingRule.shippingZoneId,
            errors: shippingRule.getErrors('shippingZoneId'),
            required: false,
            options: shippingZones,
            class: 'selectize fullwidth',
        } %}

        {{ lazyCreateSelect(
            shippingZoneSelectParams,
            'New shipping zone'|t('commerce'),
            'Create a new shipping zone'|t('commerce'),
            newShippingZoneFields,
            newShippingZoneJs,
            'commerce/shipping-zones/save',
            'Shipping zone saved.'|t
        ) }}

        {% embed '_includes/forms/field' with {
            label: 'Order Condition Formula'|t('commerce'),
            id: 'orderConditionFormula',
            rows: 5,
            instructions: 'Specify a <a href="{url}">Twig condition</a> that determines whether the shipping rule should apply to a given order. (The order can be referenced via an `order` variable.)'|t('commerce', {
                url: 'https://twig.symfony.com/doc/2.x/templates.html#expressions',
            }),
            errors: shippingRule is defined ? shippingRule.getErrors('orderConditionFormula'),
            } %}
            {% block input %}
                {% import "_includes/forms" as forms %}
                <div id="zipCodeField" class="flex flex-nowrap" style="align-items: stretch;">
                    <div  class="zip-condition">
                        {{ forms.textarea({
                            value: shippingRule is defined ? shippingRule.orderConditionFormula,
                            name: 'orderConditionFormula',
                            class: 'code',
                            rows: 5,
                            placeholder: 'Example'|t('commerce') ~ ': \'@apple.com\' in order.email'
                        }) }}
                    </div>
                </div>
            {% endblock %}
        {% endembed %}

        {% set minMaxTotalQtyInput %}
        <table class="inputs">
            <tr>
                <td>
                    {{ commerceForms.numberField({
                        name: 'minQty',
                        label: 'Minimum'|t('commerce'),
                        value: shippingRule.minQty,
                        type: 'number',
                        min: 0,
                        step: 'any',
                        placeholder: 'Minimum'|t('commerce'),
                        errors: shippingRule.getErrors('minQty')
                    }) }}
                </td>
                <td>
                    {{ commerceForms.numberField({
                        name: 'maxQty',
                        label: 'Maximum'|t('commerce'),
                        value: shippingRule.maxQty,
                        type: 'number',
                        min: 0,
                        step: 'any',
                        placeholder: 'Maximum'|t('commerce'),
                        errors: shippingRule.getErrors('maxQty')
                    }) }}
                </td>
            </tr>
        </table>
        {% endset %}

        {{ forms.field({
            label: "Order Total Quantity"|t('commerce'),
            instructions: "The total number of items in the cart to match this rule. A zero value disables the limit for each condition."|t('commerce'),
            id: 'minMaxTotalQty',
            required: true
        }, minMaxTotalQtyInput) }}

        <hr>

        {% set minMaxTotalInput %}
        <table class="inputs">
            <tr>
                <td>
                    {{ commerceForms.numberField({
                        name: 'minTotal',
                        label: 'Minimum'|t('commerce'),
                        value: shippingRule.minTotal,
                        type: 'number',
                        min: 0,
                        step: 'any',
                        placeholder: 'Minimum'|t('commerce'),
                        errors: shippingRule.getErrors('minTotal')
                    }) }}
                </td>
                <td>
                    {{ commerceForms.numberField({
                        name: 'maxTotal',
                        label: 'Maximum'|t('commerce'),
                        value: shippingRule.maxTotal,
                        type: 'number',
                        min: 0,
                        step: 'any',
                        placeholder: 'Maximum'|t('commerce'),
                        errors: shippingRule.getErrors('maxTotal')
                    }) }}
                </td>
                <td style="padding-left: 14px;">
                    {{ forms.selectField({
                        id: 'minMaxTotalType',
                        label: '&nbsp;',
                        name: 'minMaxTotalType',
                        options: [
                            {label: "Value of products before any discounts are applied."|t('commerce'), value: 'salePrice'},
                            {label: "Value of products with applied discounts."|t('commerce'), value: 'salePriceWithDiscounts'}
                        ],
                        value: shippingRule.minMaxTotalType
                    }) }}
                </td>
            </tr>
        </table>
        {% endset %}

        {{ forms.field({
            label: "Order Total Value"|t('commerce'),
            instructions: "The total value of items (excluding shipping and taxes) in the cart to match this rule. A zero value disables the limit for each condition."|t('commerce'),
            id: 'minMaxTotal',
            required: true,
        }, minMaxTotalInput) }}

        <hr>

        {% set minMaxTotalWeightInput %}
        <table class="inputs">
            <tr>
                <td>
                    {{ commerceForms.numberField({
                        name: 'minWeight',
                        label: 'Minimum'|t('commerce'),
                        value: shippingRule.minWeight,
                        type: 'number',
                        min: 0,
                        step: 'any',
                        placeholder: 'Minimum'|t('commerce'),
                        errors: shippingRule.getErrors('minWeight')
                    }) }}
                </td>
                <td>
                    {{ commerceForms.numberField({
                        name: 'maxWeight',
                        label: 'Maximum'|t('commerce'),
                        value: shippingRule.maxWeight,
                        type: 'number',
                        min: 0,
                        step: 'any',
                        placeholder: 'Maximum'|t('commerce'),
                        errors: shippingRule.getErrors('maxWeight')
                    }) }}
                </td>
            </tr>
        </table>
        {% endset %}

        {{ forms.field({
            label: "Order Total Weight"|t('commerce'),
            instructions: "The weight of the cart to match this rule. A zero value disables the limit for each condition."|t('commerce'),
            id: 'minMaxTotalWeight',
            required: true,
        }, minMaxTotalWeightInput) }}

        <h3>{{ "Shipping Category Conditions"|t('commerce') }}</h3>
        {% set shippingCategories = craft.commerce.shippingCategories.allShippingCategories %}
        {% if shippingCategories %}
            <table id="shipping-categories-conditions"
                   class="data fullwidth collapsible">
                <thead>
                <tr>
                    <th scope="col">{{ 'Name'|t('commerce') }}</th>
                    <th scope="col">{{ 'Condition'|t('commerce') }}</th>
                </tr>
                </thead>
                <tbody>
                {% for shippingCategory in shippingCategories %}
                    {% set id = shippingCategory.id %}
                    <tr{% if id %} data-id="{{ id }}" data-name="{{ shippingCategory.name }}"{% endif %}>
                        <th scope="row" data-title="{{ 'Name'|t('commerce') }}">
                            {{ shippingCategory.name|t('site') }}
                        </th>
                        <td data-title="{{ 'Condition'|t('commerce') }}">
                            {{ forms.selectField({
                                name: 'ruleCategories['~shippingCategory.id~'][condition]',
                                value: shippingRule.getShippingRuleCategories[shippingCategory.id].condition ?? 'allow',
                                options: categoryShippingOptions
                            }) }}
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        {% endif %}
    </div>
    <div id="costs-tab" class="hidden">

        {{ commerceForms.numberField({
            label: "Base Rate"|t('commerce'),
            name: 'baseRate',
            instructions: "Shipping costs added to the order as a whole before percentage, item, and weight rates are applied. Set to zero to disable this rate. The whole rule, including this base rate, will not match and apply if the cart only contains non-shippable items like digital products."|t('commerce'),
            value: shippingRule.baseRate,
            type: 'number',
            min: 0,
            step: 'any',
            errors: shippingRule.getErrors('baseRate'),
            required: true,
        }) }}

        {{ commerceForms.numberField({
            label: "Minimum Total Shipping Cost"|t('commerce'),
            name: 'minRate',
            instructions: "The minimum the customer should spend on shipping. Set to zero to disable."|t('commerce'),
            value: shippingRule.minRate,
            type: 'number',
            min: 0,
            step: 'any',
            errors: shippingRule.getErrors('minRate'),
            required: true,
        }) }}

        {{ commerceForms.numberField({
            label: "Maximum Total Shipping Cost"|t('commerce'),
            instructions: "The maximum the customer should spend on shipping. Set to zero to disable."|t('commerce'),
            name: 'maxRate',
            value: shippingRule.maxRate,
            type: 'number',
            min: 0,
            step: 'any',
            errors: shippingRule.getErrors('maxRate'),
            required: true,
        }) }}

        <h3>{{ "Item Rates"|t('commerce') }}</h3>
        {% set shippingCategories = craft.commerce.shippingCategories.allShippingCategories %}
        {% if shippingCategories %}
            <table id="shipping-categories-rates"
                   class="data fullwidth collapsible">
                <thead>
                <tr>
                    <th scope="col">{{ 'Name'|t('commerce') }}</th>
                    <th scope="col">{{ 'Per Item Rate'|t('commerce') }}</th>
                    <th scope="col">{{ 'Weight Rate'|t('commerce') }}</th>
                    <th scope="col">{{ 'Percentage Rate'|t('commerce') }}</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td scope="row" data-title="{{ 'Name'|t('commerce') }}">

                    </td>
                    <td class="topalign" data-title="{{ 'Per Item Rate'|t('commerce') }}">
                        {{ commerceForms.numberField({
                            name: 'perItemRate',
                            value: shippingRule.perItemRate,
                            type: 'number',
                            min: 0,
                            step: 'any',
                            errors: shippingRule.getErrors('perItemRate'),
                            required: true,
                        }) }}
                    </td>
                    <td class="topalign" data-title="{{ 'Weight Rate'|t('commerce') }}">
                        {{ commerceForms.numberField({
                            name: 'weightRate',
                            value: shippingRule.weightRate,
                            type: 'number',
                            min: 0,
                            step: 'any',
                            errors: shippingRule.getErrors('weightRate'),
                            required: true,
                        }) }}
                    </td>
                    <td class="topalign" data-title="{{ 'Percentage Rate'|t('commerce') }}">
                        {{ commerceForms.numberField({
                            name: 'percentageRate',
                            value: shippingRule.percentageRate,
                            type: 'number',
                            min: 0,
                            step: 'any',
                            errors: shippingRule.getErrors('percentageRate'),
                            required: true,
                        }) }}
                    </td>
                </tr>
                <tr class="js-category-overrides-heading">
                    <th colspan="4"
                        data-title="{{ 'Category Rate Overrides'|t('commerce') }}">
                        {{ "Category Rate Overrides"|t('commerce') }}
                    </th>
                </tr>
                {% for shippingCategory in shippingCategories %}
                    {% set shippingCategoryRule = shippingRule.getShippingRuleCategories[shippingCategory.id] ?? null %}
                    {% set perItemRate = shippingCategoryRule ? shippingCategoryRule.perItemRate : '' %}
                    {% set weightRate = shippingCategoryRule ? shippingCategoryRule.weightRate : '' %}
                    {% set percentageRate = shippingCategoryRule ? shippingCategoryRule.percentageRate : '' %}
                    {% set categoryCondition = shippingCategoryRule ? shippingCategoryRule.condition : '' %}

                    {% set id = shippingCategory.id %}
                    <tr{% if id %} data-id="{{ id }}" data-name="{{ shippingCategory.name }}"{% endif %}
                        class="{% if categoryCondition == 'disallow' %}hidden{% endif %} js-category-override-row">
                        <th scope="row" data-title="{{ 'Name'|t('commerce') }}">
                            {{ shippingCategory.name }}
                        </th>
                        <td class="topalign" data-title="{{ 'Per Item Rate'|t('commerce') }}">
                            {{ commerceForms.numberField({
                                name: 'ruleCategories['~shippingCategory.id~'][perItemRate]',
                                placeholder: shippingRule.perItemRate,
                                class: 'categoryPerItemRate',
                                value: perItemRate,
                                type: 'number',
                                step: 'any',
                                errors: shippingCategoryRule ? shippingCategoryRule.getErrors('perItemRate') : null,
                            }) }}
                        </td>
                        <td class="topalign" data-title="{{ 'Weight Rate'|t('commerce') }}">
                            {{ commerceForms.numberField({
                                name: 'ruleCategories['~shippingCategory.id~'][weightRate]',
                                class: 'categoryWeightRate',
                                placeholder: shippingRule.weightRate,
                                value: weightRate,
                                type: 'number',
                                step: 'any',
                                errors: shippingCategoryRule ? shippingCategoryRule.getErrors('weightRate') : null,
                            }) }}
                        </td>
                        <td class="topalign" data-title="{{ 'Percentage Rate'|t('commerce') }}">
                            {{ commerceForms.numberField({
                                name: 'ruleCategories['~shippingCategory.id~'][percentageRate]',
                                class: 'categoryPercentageRate',
                                placeholder: shippingRule.percentageRate,
                                value: percentageRate,
                                type: 'number',
                                step: 'any',
                                errors: shippingCategoryRule ? shippingCategoryRule.getErrors('percentageRate') : null,
                            }) }}
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        {% endif %}
    </div>
{% endblock %}

{% js "window.perItemPricePlaceholder = new Craft.Commerce.CommerceShippingItemRatesValuesInput('input[name=\"perItemRate\"]', '.categoryPerItemRate');" %}
{% js "window.weightRatePricePlaceholder = new Craft.Commerce.CommerceShippingItemRatesValuesInput('input[name=\"weightRate\"]', '.categoryWeightRate');" %}
{% js "window.percentagePricePlaceholder = new Craft.Commerce.CommerceShippingItemRatesValuesInput('input[name=\"percentageRate\"]', '.categoryPercentageRate');" %}

{% js %}
    window.shippingCategories = {{ craft.commerce.shippingCategories.allShippingCategories|json_encode|raw }};

    function toggleCategoryOverridesHeading() {
      if ($('.js-category-override-row.hidden').length == Object.keys(window.shippingCategories).length) {
        $('.js-category-overrides-heading').addClass('hidden');
      } else {
        $('.js-category-overrides-heading').removeClass('hidden');
      }
    }

    $("select[name^='ruleCategories']").change(function() {
      var id = $(this).closest('tr').data('id');
      var value = $(this).val();
      var $rateRow = $("#shipping-categories-rates").find("tr[data-id="+id+"]");

      if (value == 'disallow') {
        $rateRow.addClass('hidden');
      } else {
        $rateRow.removeClass('hidden');
      }

      toggleCategoryOverridesHeading();
    });

    toggleCategoryOverridesHeading();
{% endjs %}