{% extends "commerce/_layouts/cp" %}
{% do view.registerAssetBundle('craft\\web\\assets\\admintable\\AdminTableAsset') -%}

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

{% set selectedSubnavItem = 'shipping' %}

{% set fullPageForm = true %}

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

    {% set tabs = {
        0: {'label':'Shipping Method'|t('commerce'),'url':'#shipping-method-tab'}
    } %}
    {% if shippingMethod.id %}
        {% set tabs = tabs|merge({1: {'label':'Rules'|t('commerce'),'url':'#rules'}}) %}
    {% endif %}


{% block saveButton %}
    <input type="submit" class="btn submit"
           value="{{ shippingMethod.id ? 'Save and set rules'|t('commerce') :'Save'|t('commerce') }}">
{% endblock %}

{% block content %}
    <div id="shipping-method-tab">
        <input type="hidden" name="action" value="commerce/shipping-methods/save">
        {{ redirectInput('commerce/shipping/shippingmethods/{id}#rules') }}

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

        {{ forms.textField({
            first: true,
            label: "Name"|t('commerce'),
            instructions: "The name of shipping method as it will be displayed to the customer and in the control panel."|t('commerce'),
            id: 'name',
            name: 'name',
            value: shippingMethod.getName(),
            errors: shippingMethod.getErrors('name'),
            autofocus: true,
            required: true,
        }) }}

        {{ forms.textField({
            first: true,
            label: "Handle"|t('commerce'),
            instructions: "How this shipping method will be referred to in templates and forms."|t('commerce'),
            id: 'handle',
            class: 'code',
            name: 'handle',
            value: shippingMethod.handle,
            errors: shippingMethod.getErrors('handle'),
            required: true,
        }) }}

        {{ forms.lightSwitchField({
            label: "Enable this shipping method on the front end"|t('commerce'),
            id: 'enabled',
            name: 'enabled',
            on: shippingMethod.enabled,
            errors: shippingMethod.getErrors('enabled')
        }) }}

    </div>

    <div id="rules" class="hidden">
        <div id="rules-vue-admin-table"></div>

        <div class="buttons">
            <a href="{{ url('commerce/shipping/shippingmethods/'~shippingMethod.id~'/shippingrules/new') }}"
               class="btn submit add icon">{{ 'New shipping rule'|t('commerce') }}</a>
        </div>

    </div>
{% endblock %}

{% set tableData = [] %}
{% for shippingRule in shippingRules %}

  {% set details %}
    <h4>Conditions</h4>
    <strong>{{ "Shipping Zone"|t('commerce') }}</strong> {{ shippingRule.shippingZone.name ?? 'Anywhere' }}<span><br>
    {% if shippingRule.minQty > 0 %}<strong>{{ "Minimum Order Quantity"|t('commerce') }}</strong> {{shippingRule.minQty}}<br>{% endif %}
    {% if shippingRule.maxQty > 0 %}<strong>{{ "Maximum Order Quantity"|t('commerce') }}</strong> {{shippingRule.maxQty}}<br>{% endif %}
    {% if shippingRule.minTotal > 0 %}<strong>{{ "Minimum Order Total Value"|t('commerce') }}</strong> {{shippingRule.minTotal}}<br>{% endif %}
    {% if shippingRule.maxTotal > 0 %}<strong>{{ "Maximum Order Total Value"|t('commerce') }}</strong> {{shippingRule.maxTotal}}<br>{% endif %}
    {% if shippingRule.minWeight > 0 %}<strong>{{ "Minimum Order Total Weight"|t('commerce') }}</strong> {{shippingRule.minWeight}}<br>{% endif %}
    {% if shippingRule.maxWeight > 0 %}<strong>{{ "Maximum Order Total Weight"|t('commerce') }}</strong> {{shippingRule.maxWeight}}<br>{% endif %}
    <h4>Costs</h4>
    {% if shippingRule.baseRate > 0 %}<strong>{{ "Base Rate"|t('commerce') }}</strong> {{shippingRule.baseRate|commerceCurrency}}<br>{% endif %}
    {% if shippingRule.minRate > 0 %}<strong>{{ "Minimum Total Shipping Cost"|t('commerce') }}</strong> {{shippingRule.minRate|commerceCurrency}}<br>{% endif %}
    {% if shippingRule.maxRate > 0 %}<strong>{{ "Maximum Total Shipping Cost"|t('commerce') }}</strong> {{shippingRule.maxRate|commerceCurrency}}<br>{% endif %}
    {% if shippingRule.perItemRate > 0 %}<strong>{{ "Default Per Item Rate"|t('commerce') }}</strong> {{shippingRule.perItemRate|commerceCurrency}}<br>{% endif %}
    {% if shippingRule.weightRate > 0 %}<strong>{{ "Default Weight Rate"|t('commerce') }}</strong> {{shippingRule.weightRate|commerceCurrency}}<br>{% endif %}
    {% if shippingRule.percentageRate > 0 %}<strong>{{ "Default Percentage Rate"|t('commerce') }}</strong> {{shippingRule.percentageRate|commerceCurrency}}<br>{% endif %}
  {% endset %}

	{% set tableData = tableData|merge([{
        id: shippingRule.id,
        title: shippingRule.name|t('site')|e,
        url: url('commerce/shipping/shippingmethods/'~shippingRule.methodId~'/shippingrules/'~shippingRule.id),
        status: shippingRule.enabled ? true : false,
        description: shippingRule.description|t('site')|e,
        detail: { handle: tag('span', { 'data-icon': 'info', title: 'Show rule details'|t('commerce')|e }) , content: details }
    }]) %}
{% endfor %}

{% js %}
    {% if not shippingMethod.id %}new Craft.HandleGenerator('#name', '#handle');{% endif %}

    var columns = [
        { name: '__slot:title', title: Craft.t('app', 'Name') },
        { name: 'description', title: Craft.t('app', 'Description') },
        { name: '__slot:detail', title: '', titleClass: 'thin' },
    ];

    new Craft.VueAdminTable({
        columns: columns,
        container: '#rules-vue-admin-table',
        deleteAction: 'commerce/shipping-rules/delete',
        emptyMessage: Craft.t('commerce', 'No shipping rules exist yet.'),
        tableData: {{ tableData|json_encode|raw }},
        reorderAction: 'commerce/shipping-rules/reorder',
        reorderFailMessage:    Craft.t('commerce', 'Couldn’t reorder rules.'),
        reorderSuccessMessage: Craft.t('commerce', 'Rules reordered.'),
    });
{% endjs %}