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

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

{% block content %}

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

    <p>{{ 'This is the address where your store is located. It 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" data-saveshortcut>
        <input type="hidden" name="action" value="commerce/store-location/save-store-location">
        {{ redirectInput('commerce/store-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',
            required: true,
            placeholder: storeLocation.firstName,
            value: storeLocation.firstName,
            errors: storeLocation.getErrors('firstName'),
        }) }}

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

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

        <hr/>

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

        {{ forms.textField({
            label: 'Business Tax ID'|t('commerce'),
            id: 'businessTaxId',
            name: 'businessTaxId',
            placeholder: storeLocation.businessTaxId,
            value: storeLocation.businessTaxId,
            errors: storeLocation.getErrors('businessTaxId'),
        }) }}

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

        <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: 'Address 3'|t('commerce'),
            id: 'address3',
            name: 'address3',
            placeholder: storeLocation.address3,
            value: storeLocation.address3,
            errors: storeLocation.getErrors('address3'),
        }) }}

        {{ 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,
                class: 'fullwidth'
            }) }}
        </div>

        {{ forms.selectField({
            label: 'State'|t('commerce'),
            id: 'stateValue',
            name: 'stateValue',
            value: storeLocation.stateValue,
            errors: storeLocation.getErrors('stateValue'),
            class: 'selectize fullwidth'
        }) }}

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

        {{ forms.textField({
            label: 'Alternative Phone Number'|t('commerce'),
            id: 'alternativePhone',
            name: 'alternativePhone',
            placeholder: storeLocation.alternativePhone,
            value: storeLocation.alternativePhone,
            errors: storeLocation.getErrors('alternativePhone'),
        }) }}

        <hr/>

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

        {{ forms.textareaField({
            label: 'Notes'|t('commerce'),
            id: 'notes',
            name: 'notes',
            placeholder: storeLocation.notes,
            value: storeLocation.notes,
            errors: storeLocation.getErrors('notes'),
        }) }}

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

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

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

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

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

    {% set statesByCountryId = craft.commerce.states.allStates|group('countryId') %}
    {% set startingStates = statesByCountryId[storeLocation.countryId] ?? [] %}
    {% js %}
        window.statesByCountryId = {{ statesByCountryId|json_encode|raw }};

        var stateField = $('#stateValue-field').find('select').selectize({
            valueField: 'id',
            create: true,
            items: ['{{ storeLocation.stateValue }}'],
            options: {{ startingStates|json_encode|raw }},
            labelField: 'name',
            searchField: ['name'],
            dropdownParent: 'body',
            inputClass: 'selectize-input text',
            allowEmptyOption: false
        });
        var selectize = stateField[0].selectize;

        var countryField = $('#countryId');
        countryField.on('change', function(ev) {
            selectize.clearOptions();

            if (window.statesByCountryId[countryField.val()] !== undefined) {
                selectize.addOption(window.statesByCountryId[countryField.val()]);
            }

            selectize.refreshOptions();
        });
    {% endjs %}
    {% css %}
        .selectize-dropdown.single {
            margin-bottom: 1rem;
        }
    {% endcss %}
{% endblock %}