{% 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: 'Use a formula to match the the. Leave this blank to match all orders. Use the `order` variable.',
            tip: 'This field uses the Twig expression syntax. <a href="https://twig.symfony.com/doc/2.x/templates.html#expressions" class="go">Learn More</a>',
            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 Quanity"|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',
            tip: 'Order Total Quantity must be greater than the minimum value and less than the maximum value.',
            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,
            tip: 'Order Total Value must be greater than the minimum value and less than or equal to the maximum value.',
        }, 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 match this rule. A zero value disables the limit for each condition."|t('commerce'),
            id: 'minMaxTotalWeight',
            required: true,
            tip: 'Order Total Weight must be greater than the minimum value and less than or equal to the maximum value.',
        }, 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 }}
                        </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 %}