{% set countries = craft.commerce.countries.allEnabledCountriesAsList %}
{% set states = craft.commerce.states.allEnabledStatesAsListGroupedByCountryId %}

{% set modelName = modelName is defined ? modelName : 'address' %}
{% set model = address is defined ? address : null %}

<div class="addressBox {{ modelName }}">

    <div class="flex -mx-4">
        <div class="flex-1 mx-4">
            <label for="{{ modelName }}-attention">Attention</label>
            <input type="text" id="{{ modelName }}-attention" class="w-full" name="{{ modelName }}[attention]" value="{{ model ? model.attention : '' }}">
            {% if model and model.getErrors('attention') %}
                <span class="flash">{{ model.getErrors('attention')|join }}</span>
            {% endif %}

            <label for="{{ modelName }}-title">Title</label>
            <input type="text" id="{{ modelName }}-title" class="w-full" name="{{ modelName }}[title]" value="{{ model ? model.title : '' }}">
            {% if model and model.getErrors('title') %}
                <span class="flash">{{ model.getErrors('title')|join }}</span>
            {% endif %}

            <label for="{{ modelName }}-firstName">First Name</label>
            <input type="text" id="{{ modelName }}-firstName" class="w-full" name="{{ modelName }}[firstName]" value="{{ model ? model.firstName : '' }}">
            {% if model and model.getErrors('firstName') %}
                <span class="flash">{{ model.getErrors('firstName')|join }}</span>
            {% endif %}

            <label for="{{ modelName }}-lastName">Last Name</label>
            <input type="text" id="{{ modelName }}-lastName" class="w-full" name="{{ modelName }}[lastName]" value="{{ model ? model.lastName : '' }}">
            {% if model and model.getErrors('lastName') %}
                <span class="flash">{{ model.getErrors('lastName')|join }}</span>
            {% endif %}

            <label for="{{ modelName }}-fullName">Full Name</label>
            <input type="text" id="{{ modelName }}-fullName" class="w-full" name="{{ modelName }}[fullName]" value="{{ model ? model.fullName : '' }}">
            {% if model and model.getErrors('fullName') %}
                <span class="flash">{{ model.getErrors('fullName')|join }}</span>
            {% endif %}

            <label for="{{ modelName }}-label">Label</label>
            <input type="text" id="{{ modelName }}-label" class="w-full" name="{{ modelName }}[label]" value="{{ model ? model.label : '' }}">
            {% if model and model.getErrors('label') %}
                <span class="flash">{{ model.getErrors('label')|join }}</span>
            {% endif %}

            <label for="{{ modelName }}-businessName">Business Name</label>
            <input type="text" id="{{ modelName }}-businessName" class="w-full" name="{{ modelName }}[businessName]" value="{{ model ? model.businessName : '' }}">
            {% if model and model.getErrors('businessName') %}
                <span class="flash">{{ model.getErrors('businessName')|join }}</span>
            {% endif %}

            <div class="flex -mx-4">
                <div class="flex-1 mx-4">
                    <label for="{{ modelName }}-businessTaxId">Business Tax ID</label>
                    <input type="text" id="{{ modelName }}-businessTaxId" class="w-full" name="{{ modelName }}[businessTaxId]" value="{{ model ? model.businessTaxId : '' }}">
                    {% if model and model.getErrors('businessTaxId') %}
                        <span class="flash">{{ model.getErrors('businessTaxId')|join }}</span>
                    {% endif %}
                </div>
                <div class="flex-1 mx-4">
                    <label for="{{ modelName }}-businessId">Business ID</label>
                    <input type="text" id="{{ modelName }}-businessId" class="w-full" name="{{ modelName }}[businessId]" value="{{ model ? model.businessId : '' }}">
                    {% if model and model.getErrors('businessId') %}
                        <span class="flash">{{ model.getErrors('businessId')|join }}</span>
                    {% endif %}
                </div>
            </div>

            <div class="flex -mx-4">
                <div class="flex-1 mx-4">
                    <label for="{{ modelName }}-custom1">Custom 1</label>
                    <input type="text" id="{{ modelName }}-custom1" class="w-full" name="{{ modelName }}[custom1]" value="{{ model ? model.custom1 : '' }}">
                    {% if model and model.getErrors('custom1') %}
                        <span class="flash">{{ model.getErrors('custom1')|join }}</span>
                    {% endif %}
                </div>
                <div class="flex-1 mx-4">
                    <label for="{{ modelName }}-custom2">Custom 2</label>
                    <input type="text" id="{{ modelName }}-custom2" class="w-full" name="{{ modelName }}[custom2]" value="{{ model ? model.custom2 : '' }}">
                    {% if model and model.getErrors('custom2') %}
                        <span class="flash">{{ model.getErrors('custom2')|join }}</span>
                    {% endif %}
                </div>
            </div>

            <div class="flex -mx-4">
                <div class="flex-1 mx-4">
                    <label for="{{ modelName }}-custom3">Custom 3</label>
                    <input type="text" id="{{ modelName }}-custom3" class="w-full" name="{{ modelName }}[custom3]" value="{{ model ? model.custom3 : '' }}">
                    {% if model and model.getErrors('custom3') %}
                        <span class="flash">{{ model.getErrors('custom3')|join }}</span>
                    {% endif %}
                </div>
                <div class="flex-1 mx-4">
                    <label for="{{ modelName }}-custom4">Custom 4</label>
                    <input type="text" id="{{ modelName }}-custom4" class="w-full" name="{{ modelName }}[custom4]" value="{{ model ? model.custom4 : '' }}">
                    {% if model and model.getErrors('custom4') %}
                        <span class="flash">{{ model.getErrors('custom4')|join }}</span>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="flex-1 mx-4">
            <label for="{{ modelName }}-address1">Address 1</label>
            <input type="text" id="{{ modelName }}-address1" class="w-full" name="{{ modelName }}[address1]" value="{{ model ? model.address1 : '' }}">
            {% if model and model.getErrors('address1') %}
                <span class="flash">{{ model.getErrors('address1')|join }}</span>
            {% endif %}

            <label for="{{ modelName }}-address2">Address 2</label>
            <input type="text" id="{{ modelName }}-address2" class="w-full" name="{{ modelName }}[address2]" value="{{ model ? model.address2 : '' }}">
            {% if model and model.getErrors('address2') %}
                <span class="flash">{{ model.getErrors('address2')|join }}</span>
            {% endif %}

            <label for="{{ modelName }}-address3">Address 3</label>
            <input type="text" id="{{ modelName }}-address3" class="w-full" name="{{ modelName }}[address3]" value="{{ model ? model.address3 : '' }}">
            {% if model and model.getErrors('address3') %}
                <span class="flash">{{ model.getErrors('address3')|join }}</span>
            {% endif %}

            <div class="flex -mx-4">
                <div class="flex-1 mx-4">
                    <label for="{{ modelName }}-city">City</label>
                    <input type="text" id="{{ modelName }}-city" class="w-full" name="{{ modelName }}[city]" value="{{ model ? model.city : '' }}">
                    {% if model and model.getErrors('city') %}
                        <span class="flash">{{ model.getErrors('city')|join }}</span>
                    {% endif %}
                </div>
                <div class="flex-1 mx-4">
                    <label for="{{ modelName }}-zipCode">Zip Code</label>
                    <input type="text" id="{{ modelName }}-zipCode" class="w-full" name="{{ modelName }}[zipCode]" value="{{ model ? model.zipCode : '' }}">
                    {% if model and model.getErrors('zipCode') %}
                        <span class="flash">{{ model.getErrors('zipCode')|join }}</span>
                    {% endif %}
                </div>
            </div>

            <label for="{{ modelName }}-phone">Phone</label>
            <input type="text" id="{{ modelName }}-phone" class="w-full" name="{{ modelName }}[phone]" value="{{ model ? model.phone : '' }}">
            {% if model and model.getErrors('phone') %}
                <span class="flash">{{ model.getErrors('phone')|join }}</span>
            {% endif %}

            <label for="{{ modelName }}-alternativePhone">Alternative Phone</label>
            <input type="text" id="{{ modelName }}-alternativePhone" class="w-full" name="{{ modelName }}[alternativePhone]" value="{{ model ? model.alternativePhone : '' }}">
            {% if model and model.getErrors('alternativePhone') %}
                <span class="flash">{{ model.getErrors('alternativePhone')|join }}</span>
            {% endif %}


            <div class="flex -mx-4">
                <div class="flex-1 mx-4">
                    <label for="{{ modelName }}-state">State</label>
                    {% set options = (model and states[model.countryId] is defined ? states[model.countryId] : []) %}
                    <select id="{{ modelName }}-stateId" data-modelname="{{ modelName }}" class="address-stateId w-full {% if options|length == 0 %}hidden{% endif %}" name="{{ modelName }}[stateValue]">
                        {% for key, option in options %}
                            {% set optionValue = (model ? model.stateId : '') %}
                            <option value="{{ key }}" {% if key == optionValue %}selected{% endif %}>{{ option }}</option>
                        {% endfor %}
                    </select>
                    <input type="text" data-modelname="{{ modelName }}" id="{{ modelName }}-stateName" class="address-stateName {% if options|length > 0 %}hidden{% endif %} w-full" {% if options|length == 0 %}name="{{ modelName }}[stateValue]"{% endif %} value="{{ model ? model.stateName : '' }}">
                    {% if model and model.getErrors('stateValue') %}
                        <span class="flash">{{ model.getErrors('stateValue')|join }}</span>
                    {% endif %}
                </div>
                <div class="flex-1 mx-4">
                    <label for="{{ modelName }}-countryId">Country *</label>
                    <select class="address-country w-full" name="{{ modelName }}[countryId]">
                        {% for key, option in countries %}
                            {% set optionValue = (model ? model.countryId : '') %}
                            <option value="{{ key }}" {% if key == optionValue %} selected{% endif %}>{{ option }}</option>
                        {% endfor %}
                    </select>
                    {% if model and model.getErrors('countryId') %}
                        <span class="flash">{{ model.getErrors('countryId')|join }}</span>
                    {% endif %}
                </div>
            </div>

            <label for="{{ modelName }}-notes">Notes</label>
            <textarea class="w-full" name="{{ modelName }}[notes]" id="{{ modelName }}-notes" cols="30" rows="10">{{ model ? model.notes : '' }}</textarea>
            {% if model and model.getErrors('notes') %}
                <span class="flash">{{ model.getErrors('notes')|join }}</span>
            {% endif %}


        </div>
    </div>
</div>

{% js %}
var states = {{ craft.commerce.states.allEnabledStatesAsListGroupedByCountryId|json_encode|raw }};

    $('select.address-country').change(function ()
    {
        // get the value of the selected country.
        var cid = $(this).val();
        var $states = $(this).closest('.addressBox').find('select.address-stateId');
        var $stateName = $(this).closest('.addressBox').find('input.address-stateName');
        $states.find('option').remove();

        if (states.hasOwnProperty(cid))
        {
            // We have states for this country, show the states drop down.
            $states.removeClass('hidden');
            $states.attr('name', $states.data('modelname')+'[stateValue]');

            // We have states for this country, hide the stateName input.
            $stateName.removeAttr('name');
            $stateName.addClass('hidden');
            $stateName.val('');

            // Add all states as options to drop down.
            for (var id in states[cid])
            {
                var state = states[cid][id];
                var $option = $('<option/>');
                $option.attr('value', id).text(state);
                $states.append($option);
            }

        }else{
            // hide the states dropdown, since this country has none.
            $states.addClass('hidden');
            $states.removeAttr('name');

            // show the stateName
            $stateName.removeClass('hidden');
            $stateName.attr('name', $stateName.data('modelname')+'[stateValue]');
        }

    });

    $('select').addClass('form-control input-sm');

    {% endjs %}