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

{% do view.registerAssetBundle('craft\\web\\assets\\admintable\\AdminTableAsset') -%}
{% do view.registerTranslations('commerce', [
    'Abbreviation',
    'Couldn’t reorder states.',
    'Country',
    'Disabled',
    'Enabled',
    'Name',
    'No states exist yet.',
    'Set state status',
    'States reordered.',
    'Warning, deleting this state will remove it from all addresses and zones, are you sure you want to delete “{name}”?',
]) %}


{% set crumbs = [
    { label: "Store Settings"|t('commerce'), url: url('commerce/store-settings') },
    { label: "Countries"|t('commerce'), url: url('commerce/store-settings/countries') },
] %}

{% set selectedSubnavItem = 'store-settings' %}

{% set fullPageForm = true %}

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

{% block content %}
    <input type="hidden" name="action" value="commerce/countries/save">
    {{ redirectInput('commerce/store-settings/countries') }}
    {% if country.id %}<input type="hidden" name="countryId"
                              value="{{ country.id }}">{% endif %}

    {{ forms.textField({
        first: true,
        label: "Name"|t('commerce'),
        instructions: "What this country will be called in the control panel."|t('commerce'),
        id: 'name',
        name: 'name',
        value: country.name,
        errors: country.getErrors('name'),
        autofocus: true,
        required: true
    }) }}

    {{ forms.textField({
        label: "ISO"|t('commerce'),
        instructions: "The two-letter ISO country code."|t('commerce'),
        id: 'iso',
        name: 'iso',
        value: country.iso,
        errors: country.getErrors('iso'),
        required: true,
    }) }}

    {{ forms.checkboxField({
        label: "Require a state to be selected when this country is chosen"|t('commerce'),
        id: 'isStateRequired',
        name: 'isStateRequired',
        value: 1,
        checked: country.isStateRequired,
        errors: country.getErrors('isStateRequired')
    }) }}

    {{ forms.lightswitchField({
        label: "Enabled?"|t('commerce'),
        id: 'enabled',
        name: 'enabled',
        value: 1,
        on: country.enabled,
        errors: country.getErrors('enabled'),
        warning: showDisableWarning ? 'You will not be able to update addresses, shipping zones or tax zones related to this country if it is disabled.'|t('commerce') : null,
    }) }}

    <hr>
    <h3>States</h3>

    <div id="states-vue-admin-table"></div>
    {% set tableData = [] %}
    {% for state in states if state.countryId == country.id %}
      {% set tableData = tableData|merge([{
            id: state.id,
            title: state.name|t('site'),
            url: url('commerce/store-settings/states/'~state.id),
            status: state.enabled ? true : false,
            abbreviation: state.abbreviation|e,
            country: {
                status: state.country.enabled ? true : false,
                country: state.country.name|t('site')|e
            }
        }]) %}
    {% endfor %}

    {% js %}
        var columns = [
            { name: '__slot:title', title: Craft.t('commerce', 'Name') },
            { name: 'abbreviation', title: Craft.t('commerce', 'Abbreviation') }
        ];

        var actions = [
            {
                label: Craft.t('commerce', 'Set state status'),
                actions: [
                    {
                        label: Craft.t('commerce', 'Enabled'),
                        action: 'commerce/states/update-status',
                        param: 'status',
                        value: 'enabled',
                        status: 'enabled'
                    },
                    {
                        label: Craft.t('commerce', 'Disabled'),
                        action: 'commerce/states/update-status',
                        param: 'status',
                        value: 'disabled',
                        status: 'disabled'
                    }
                ]
            }
        ];

        new Craft.VueAdminTable({
            actions: actions,
            checkboxes: true,
            columns: columns,
            container: '#states-vue-admin-table',
            deleteAction: 'commerce/states/delete',
            deleteConfirmationMessage: Craft.t('commerce', 'Warning, deleting this state will remove it from all addresses and zones, are you sure you want to delete “{name}”?'),
            emptyMessage: Craft.t('commerce', 'No states exist yet.'),
            padded: true,
            tableData: {{ tableData|json_encode|raw }},
            reorderAction: 'commerce/states/reorder',
            reorderFailMessage:    Craft.t('commerce', 'Couldn’t reorder states.'),
            reorderSuccessMessage: Craft.t('commerce', 'States reordered.'),
        });
    {% endjs %}

    <div style="padding-top: 20px;">
        {% set newStateUrl = country.id ? '?countryId='~country.id : '' %}
        <a href="{{ url('commerce/store-settings/states/new') ~ newStateUrl }}" class="btn add icon">{{ 'New state'|t('commerce') }}</a>
    </div>
{% endblock %}