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

{% set selectedTab = 'settings' %}

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

{% block content %}

    <h2>{{ "Store location"|t('commerce') }}</h2>

    <p>{{ 'The store location address may be used by various plugins to determine things like shipping and taxes. It could also be used in PDF receipts.'|t('commerce') }}</p>

    <form action="" method="post" accept-charset="UTF-8">
        <input type="hidden" name="action" value="commerce/settings/save-store-location">
        {{ redirectInput('commerce/settings/location') }}
        {{ csrfInput() }}

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

        {{ forms.textField({
            label: 'Attention'|t('commerce'),
            id: 'attention',
            name: 'attention',
            placeholder: storeLocation.attention,
            value: storeLocation.attention,
            errors: storeLocation.getErrors('attention'),
        }) }}

        {{ forms.textField({
            label: 'Title'|t('commerce'),
            id: 'title',
            name: 'title',
            placeholder: storeLocation.title,
            value: storeLocation.title,
            errors: storeLocation.getErrors('title'),
        }) }}


        {{ forms.textField({
            label: 'First name'|t('commerce'),
            id: 'firstName',
            name: 'firstName',
            placeholder: storeLocation.firstName,
            value: storeLocation.firstName,
            errors: storeLocation.getErrors('firstName'),
        }) }}

        {{ forms.textField({
            label: 'Last name'|t('commerce'),
            id: 'lastName',
            name: 'lastName',
            placeholder: storeLocation.lastName,
            value: storeLocation.lastName,
            errors: storeLocation.getErrors('lastName'),
        }) }}

        {{ forms.textField({
            label: 'Company'|t('commerce'),
            id: 'businessName',
            name: 'businessName',
            placeholder: storeLocation.businessName,
            value: storeLocation.businessName,
            errors: storeLocation.getErrors('company'),
        }) }}

        <hr/>

        {{ forms.textField({
            label: 'Address 1'|t('commerce'),
            id: 'address1',
            name: 'address1',
            required: true,
            placeholder: storeLocation.address1,
            value: storeLocation.address1,
            errors: storeLocation.getErrors('address1'),
        }) }}

        {{ forms.textField({
            label: 'Address 2'|t('commerce'),
            id: 'address2',
            name: 'address2',
            placeholder: storeLocation.address2,
            value: storeLocation.address2,
            errors: storeLocation.getErrors('address2'),
        }) }}

        {{ forms.textField({
            label: 'City'|t('commerce'),
            id: 'city',
            name: 'city',
            placeholder: storeLocation.city,
            value: storeLocation.city,
            errors: storeLocation.getErrors('city'),
        }) }}

        {{ forms.textField({
            label: 'Zip code'|t('commerce'),
            id: 'zipCode',
            name: 'zipCode',
            placeholder: storeLocation.zipCode,
            value: storeLocation.zipCode,
            errors: storeLocation.getErrors('zipCode'),
        }) }}

        <div class="countrySelector field">
            {{ forms.selectField({
                label: "Country"|t('commerce'),
                id: 'countryId',
                name: 'countryId',
                value: storeLocation.countryId,
                options: craft.commerce.countries.allCountriesAsList,
                errors: storeLocation.getErrors('countryId'),
                required: true,
            }) }}
        </div>

        {% set states = craft.commerce.getStates().getAllStatesAsList() %}

        {% for countryId, list in states %}
            <div data-country="{{ countryId }}"
                 class="stateSelector field hidden">
                {{ forms.selectField({
                    label: "State"|t('commerce'),
                    id: 'stateId',
                    name: 'stateId',
                    value: storeLocation.stateId,
                    options: list,
                    errors: storeLocation.getErrors('stateId'),
                    required: true
                }) }}
            </div>
        {% endfor %}


        <input type="submit" class="btn submit"
               value="{{ "Save"|t('commerce') }}">
    </form>

    {% js %}
        function displayStates(id) {
          $('.stateSelector').addClass('hidden').find('select').prop('disabled', true);
          $('.stateSelector[data-country=' + id + ']').removeClass('hidden').find('select').prop('disabled', false);
        }

        $('.countrySelector select').on('change', function (ev) {
          var id = $(ev.currentTarget).val();
          displayStates(id);
        });

        displayStates($('.countrySelector select').val());
    {% endjs %}
{% endblock %}