{% extends "commerce/_layouts/tax" %}
{% do view.registerAssetBundle('craft\\web\\assets\\admintable\\AdminTableAsset') -%}
{% do view.registerTranslations('commerce', [
    'Countries/States',
    'Has Zip Condition?',
    'Used By Tax Rates',
    'Default?',
]) %}

{% from "commerce/_includes/settings" import indexInlineList %}

{% block actionButton %}
    {{ craft.commerce.taxes.taxZoneActionHtml()|raw }}

    {% if craft.commerce.taxes.createTaxZones() %}
        <a href="{{ url('commerce/tax/taxzones/new') }}" class="btn submit add icon">{{ 'New tax zone'|t('commerce') }}</a>
    {% endif %}
{% endblock %}

{% block content %}
    <div id="tax-vue-admin-table"></div>
{% endblock %}

{% set tableData = [] %}
{% for taxZone in taxZones %}
    {% set taxRates = [] %}
    {% for taxRate in taxZone.taxRates %}
        {% set taxRates = taxRates|merge([{
            label: taxRate.name|t('site')|e,
            url: taxRate.cpEditUrl,
        }]) %}
    {% endfor %}

	{% set tableData = tableData|merge([{
        id: taxZone.id,
        title: taxZone.name|t('site'),
        url: taxZone.cpEditUrl,
        description: taxZone.description|t('site')|e,
        type: taxZone.isCountryBased ? 'Country-based'|t('commerce') : 'State-based'|t('commerce'),
        countryState: taxZone.isCountryBased ? indexInlineList(taxZone.getCountriesNames()) : indexInlineList(taxZone.getStatesNames()),
        zipCondition: taxZone.zipCodeConditionFormula ? true : false,
        taxRates: taxRates,
        default: taxZone.default ? true : false,
        _showDelete: not taxZone.taxRates|length ? true : false
    }]) %}
{% endfor %}

{% js %}
    var columns = [
        { name: '__slot:title', title: Craft.t('app', 'Name') },
        { name: 'description', title: Craft.t('app', 'Description') },
        { name: 'type', title: Craft.t('app', 'Type') },
        { name: 'countryState', title: Craft.t('commerce', 'Countries/States') },
        {
            name: 'zipCondition',
            title: Craft.t('commerce', 'Has Zip Condition?'),
            callback: function(value) {
                if (value) {
                    return '<div data-icon="check"></div>';
                }
            }
        },
        {
            name: 'taxRates',
            title: Craft.t('commerce', 'Used By Tax Rates'),
            callback: function(value) {
                var output = '';
                if (value && value.length) {
                    for (var i = 0; i < value.length; i++) {
                        output += '<a href="'+value[i].url+'">'+value[i].label+'</a><br>';
                    }
                }

                return output;
            }
        },
        {
            name: 'default',
            title: Craft.t('commerce', 'Default?'),
            callback: function(value) {
                if (value) {
                    return '<div data-icon="check"></div>';
                }
            }
        },
    ];

    new Craft.VueAdminTable({
        columns: columns,
        container: '#tax-vue-admin-table',
        deleteAction: {{ craft.commerce.taxes.deleteTaxZones() ? 'commerce/tax-zones/delete'|json_encode|raw : 'null' }},
        tableData: {{ tableData|json_encode|raw }},
    });
{% endjs %}