{% 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: "What this shipping method will be called in the CP."|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 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,
    }]) %}
{% 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') },
    ];

    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 }}
    });
{% endjs %}