{% 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 details %}
    <div class="meta">
        {{ 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,
        }) }}
    </div>

    {% if country and country.id %}
        <div class="meta read-only">
            <div class="data">
                <h5 class="heading">{{ "Created at"|t('app') }}</h5>
                <div id="date-created-value" class="value">{{ country.dateCreated|datetime('short') }}</div>
            </div>
            <div class="data">
                <h5 class="heading">{{ "Updated at"|t('app') }}</h5>
                <div id="date-updated-value" class="value">{{ country.dateUpdated|datetime('short') }}</div>
            </div>
        </div>
    {% endif %}
{% endblock %}

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

    <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 %}