@model AddressModel
@{
    var prefix = ViewData.TemplateInfo.HtmlFieldPrefix;
}
@if (Model.CountryEnabled && Model.StateProvinceEnabled)
{
    <script asp-location="Footer" asp-order="300">
            function @Html.IdFor(model => model.CountryId)_select_element(e) {
                var selectedItem = e.value;
                var ddlStates = document.getElementById("@Html.IdFor(model => model.StateProvinceId)");
                axios({
                    method: 'get',
                    url: "@(Url.RouteUrl("GetStatesByCountryId"))",
                    params: { "countryId": selectedItem, "addSelectStateItem": "true" },
                }).then(function (response) {
                    ddlStates.innerHTML = '';
                    response.data.forEach(function (id, option) {
                        elChild = document.createElement('option');
                        elChild.setAttribute('value', id.id);
                        elChild.innerHTML = id.name;
                        ddlStates.appendChild(elChild);
                    });
                    createorupdateaddress@{@prefix}.StateProvinceId = response.data[0].id;
                }).then(function () {
                    ddlStates.classList.remove('is-valid');
                    ddlStates.classList.add('is-invalid');
                }).catch(function (error) {
                    alert(error);
                });
            }
        function @Html.IdFor(model => model.StateProvinceId)_select_element(e) {
            var ddlStates = document.getElementById("@Html.IdFor(model => model.StateProvinceId)");
            if (e.selectedIndex > 0) {
                ddlStates.classList.remove('is-invalid');
                ddlStates.classList.add('is-valid');
            } else {
                ddlStates.classList.remove('is-valid');
                ddlStates.classList.add('is-invalid');
            }
        }
    </script>
}
<input asp-for="Id" type="hidden" />
<div class="edit-address row">
    @if (Model.NameEnabled)
    {
        <div class="form-group col-sm-12 col-md-12">
            <label asp-for="Name" class="col-form-label">@Loc["Address.Fields.Name"]:</label>
            <input asp-for="Name" v-model="createorupdateaddress@{@prefix}.Name" v-bind:class="['form-control']" />
        </div>
    }
    <div class="form-group col-sm-12 col-md-6">
        <validation-provider tag="div" rules="required" :name="'@prefix' + '.FirstName'" v-slot="{ errors, classes }">
            <label asp-for="FirstName" class="col-form-label">@Loc["Address.Fields.FirstName"]:</label>
            <span class="required">*</span>
            <input asp-for="FirstName" v-model="createorupdateaddress@{@prefix}.FirstName" v-bind:class="[classes , 'form-control']" />
            <span class="field-validation-error">{{ errors[0] }}</span>
            <span asp-validation-for="FirstName"></span>
        </validation-provider>
    </div>
    <div class="form-group col-sm-12 col-md-6">
        <validation-provider tag="div" rules="required" :name="'@prefix'  + '.LastName'" v-slot="{ errors, classes }">
            <label asp-for="LastName" class="col-form-label">@Loc["Address.Fields.LastName"]:</label>
            <span class="required">*</span>
            <input asp-for="LastName" v-model="createorupdateaddress@{@prefix}.LastName" v-bind:class="[classes , 'form-control']" />
            <span class="field-validation-error">{{ errors[0] }}</span>
            <span asp-validation-for="LastName"></span>
        </validation-provider>
    </div>
    <div class="form-group col-sm-12">
        <validation-provider tag="div" rules="required|email" :name="'@prefix'  + '.Email'" v-slot="{ errors, classes }">
            <label asp-for="Email" class="col-form-label">@Loc["Address.Fields.Email"]:</label>
            <span class="required">*</span>
            <input asp-for="Email" v-model="createorupdateaddress@{@prefix}.Email" v-bind:class="[classes , 'form-control']" asp-readonly=@(Model.DisallowUsersToChangeEmail) />
            <span class="field-validation-error">{{ errors[0] }}</span>
            <span asp-validation-for="Email"></span>
        </validation-provider>
    </div>
    @if (Model.CompanyEnabled)
    {
        <div class="form-group col-sm-12">
            @if (Model.CompanyRequired)
            {
                <validation-provider tag="div" rules="required" :name="'@prefix'  + '.Company'" v-slot="{ errors, classes }">
                    <label asp-for="Company" class="col-form-label">@Loc["Address.Fields.Company"]:</label>
                    <span class="required">*</span>
                    <input asp-for="Company" v-model="createorupdateaddress@{@prefix}.Company" v-bind:class="[classes , 'form-control']" />
                    <span class="field-validation-error">{{ errors[0] }}</span>
                    <span asp-validation-for="Company"></span>
                </validation-provider>
            }
            else
            {
                <label asp-for="Company" class="col-form-label">@Loc["Address.Fields.Company"]:</label>
                <input asp-for="Company" class="form-control" />
            }
            <span asp-validation-for="Company"></span>
        </div>
    }
    @if (Model.VatNumberEnabled)
    {
        <div class="form-group col-sm-12">
            @if (Model.VatNumberRequired)
            {
                <validation-provider tag="div" rules="required" :name="'@prefix' + '.VatNumber'" v-slot="{ errors, classes }">
                    <label asp-for="VatNumber" class="col-form-label">@Loc["Address.Fields.VatNumber"]:</label>
                    <span class="required">*</span>
                    <input asp-for="VatNumber" v-model="createorupdateaddress@{@prefix}.VatNumber" v-bind:class="[classes , 'form-control']" />
                    <span class="field-validation-error">{{ errors[0] }}</span>
                    <span asp-validation-for="VatNumber"></span>
                </validation-provider>
            }
            else
            {
                <label asp-for="VatNumber" class="col-form-label">@Loc["Address.Fields.VatNumber"]:</label>
                <input asp-for="VatNumber" class="form-control" />
            }
            <span asp-validation-for="VatNumber"></span>
        </div>
    }
    @if (Model.CountryEnabled)
    {
        <div class="form-group col-sm-12 col-md-6">
            <validation-provider tag="div" rules="required" :name="'@prefix' + '.CountryId'" v-slot="{ errors, classes }">
                <label asp-for="CountryId" class="col-form-label">@Loc["Address.Fields.Country"]:</label>
                <span class="required">*</span>
                <select asp-for="CountryId" asp-items="Model.AvailableCountries"
                        onchange="@Html.IdFor(model => model.CountryId)_select_element(this)" v-bind:class="[classes , 'form-control custom-select']" v-model="createorupdateaddress@{@prefix}.CountryId"></select>
                <span class="field-validation-error">{{ errors[0] }}</span>
                <span asp-validation-for="CountryId"></span>
            </validation-provider>
        </div>
    }

    @if (Model.CountryEnabled && Model.StateProvinceEnabled)
    {
        <div class="form-group col-sm-12 col-md-6">
            <validation-provider tag="div" rules="required" :name="'@prefix' + '.StateProvinceId'" v-slot="{ errors, classes }">
                <label asp-for="StateProvinceId" class="col-form-label">@Loc["Address.Fields.StateProvince"]:</label>
                <span class="required">*</span>
                <select asp-for="StateProvinceId" data-val-required="@Loc["Address.Fields.StateProvince.Required"]" v-bind:class="[classes , 'form-control custom-select']"
                        onchange="@Html.IdFor(model => model.StateProvinceId)_select_element(this)" asp-items="Model.AvailableStates" v-model="createorupdateaddress@{@prefix}.StateProvinceId"></select>
                <span class="field-validation-error">{{ errors[0] }}</span>
                <span asp-validation-for="StateProvinceId"></span>
            </validation-provider>
        </div>
    }
    @if (Model.CityEnabled)
    {
        <div class="form-group col-sm-12">
            @if (Model.CityRequired)
            {
                <validation-provider tag="div" rules="required" :name="'@prefix' + '.City'" v-slot="{ errors, classes }">
                    <label asp-for="City" class="col-form-label">@Loc["Address.Fields.City"]:</label>
                    <span class="required">*</span>
                    <input asp-for="City" v-model="createorupdateaddress@{@prefix}.City" v-bind:class="[classes , 'form-control']" />
                    <span class="field-validation-error">{{ errors[0] }}</span>
                    <span asp-validation-for="City"></span>
                </validation-provider>
            }
            else
            {
                <label asp-for="City" class="col-form-label">@Loc["Address.Fields.City"]:</label>
                <input asp-for="City" class="form-control" />
            }
            <span asp-validation-for="City"></span>
        </div>
    }
    @if (Model.StreetAddressEnabled)
    {
        <div class="form-group col-sm-12 col-md-6">
            @if (Model.StreetAddressRequired)
            {
                <validation-provider tag="div" rules="required" :name="'@prefix' + '.Address1'" v-slot="{ errors, classes }">
                    <label asp-for="Address1" class="col-form-label">@Loc["Address.Fields.Address1"]:</label>
                    <span class="required">*</span>
                    <input asp-for="Address1" v-model="createorupdateaddress@{@prefix}.Address1" v-bind:class="[classes , 'form-control']" />
                    <span class="field-validation-error">{{ errors[0] }}</span>
                    <span asp-validation-for="Address1"></span>
                </validation-provider>
            }
            else
            {
                <label asp-for="Address1" class="col-form-label">@Loc["Address.Fields.Address1"]:</label>
                <input asp-for="Address1" class="form-control" />
            }
            <span asp-validation-for="Address1"></span>
        </div>
    }
    @if (Model.StreetAddress2Enabled)
    {
        <div class="form-group col-sm-12 col-md-6">
            @if (Model.StreetAddress2Required)
            {
                <validation-provider tag="div" rules="required" :name="'@prefix' + '.Address2'" v-slot="{ errors, classes }">
                    <label asp-for="Address2" class="col-form-label">@Loc["Address.Fields.Address2"]:</label>
                    <span class="required">*</span>
                    <input asp-for="Address2" v-model="createorupdateaddress@{@prefix}.Address2" v-bind:class="[classes , 'form-control']" />
                    <span class="field-validation-error">{{ errors[0] }}</span>
                    <span asp-validation-for="Address2"></span>
                </validation-provider>
            }
            else
            {
                <label asp-for="Address2" class="col-form-label">@Loc["Address.Fields.Address2"]:</label>
                <input asp-for="Address2" class="form-control" />
            }
            <span asp-validation-for="Address2"></span>
        </div>
    }
    @if (Model.ZipPostalCodeEnabled)
    {
        <div class="form-group col-sm-12">
            @if (Model.ZipPostalCodeRequired)
            {
                <validation-provider tag="div" rules="required" :name="'@prefix' + '.ZipPostalCode'" v-slot="{ errors, classes }">
                    <label asp-for="ZipPostalCode" class="col-form-label">@Loc["Address.Fields.ZipPostalCode"]:</label>
                    <span class="required">*</span>
                    <input asp-for="ZipPostalCode" v-model="createorupdateaddress@{@prefix}.ZipPostalCode" v-bind:class="[classes , 'form-control']" />
                    <span class="field-validation-error">{{ errors[0] }}</span>
                    <span asp-validation-for="ZipPostalCode"></span>
                </validation-provider>
            }
            else
            {
                <label asp-for="ZipPostalCode" class="col-form-label">@Loc["Address.Fields.ZipPostalCode"]:</label>
                <input asp-for="ZipPostalCode" class="form-control" />
            }
            <span asp-validation-for="ZipPostalCode"></span>
        </div>
    }
    @if (Model.PhoneEnabled)
    {
        <div class="form-group col-sm-12 col-md-6">
            @if (Model.PhoneRequired)
            {
                <validation-provider tag="div" rules="required" :name="'@prefix' + '.PhoneNumber'" v-slot="{ errors, classes }">
                    <label asp-for="PhoneNumber" class="col-form-label">@Loc["Address.Fields.PhoneNumber"]:</label>
                    <span class="required">*</span>
                    <input asp-for="PhoneNumber" v-model="createorupdateaddress@{@prefix}.PhoneNumber" v-bind:class="[classes , 'form-control']" />
                    <span class="field-validation-error">{{ errors[0] }}</span>
                    <span asp-validation-for="PhoneNumber"></span>
                </validation-provider>
            }
            else
            {
                <label asp-for="PhoneNumber" class="col-form-label">@Loc["Address.Fields.PhoneNumber"]:</label>
                <input asp-for="PhoneNumber" class="form-control" />
            }
            <span asp-validation-for="PhoneNumber"></span>
        </div>
    }
    @if (Model.FaxEnabled)
    {
        <div class="form-group col-sm-12 col-md-6">
            @if (Model.FaxRequired)
            {
                <validation-provider tag="div" rules="required" :name="'@prefix' + '.FaxNumber'" v-slot="{ errors, classes }">
                    <label asp-for="FaxNumber" class="col-form-label">@Loc["Address.Fields.FaxNumber"]:</label>
                    <span class="required">*</span>
                    <input asp-for="FaxNumber" v-model="createorupdateaddress@{@prefix}.FaxNumber" v-bind:class="[classes , 'form-control']" />
                    <span class="field-validation-error">{{ errors[0] }}</span>
                    <span asp-validation-for="FaxNumber"></span>
                </validation-provider>
            }
            else
            {
                <label asp-for="FaxNumber" class="col-form-label">@Loc["Address.Fields.FaxNumber"]:</label>
                <input asp-for="FaxNumber" class="form-control" />
            }
            <span asp-validation-for="FaxNumber"></span>
        </div>
    }
    @if (Model.NoteEnabled)
    {
        <div class="form-group col-sm-12 col-md-12">
            <label asp-for="Note" class="col-form-label">@Loc["Address.Fields.Note"]:</label>
            <input asp-for="Note" class="form-control" />
            <span asp-validation-for="Note"></span>
        </div>
    }
    @if (Model.AddressTypeEnabled && !Model.HideAddressType)
    {
        <div class="form-group col-sm-12 col-md-6">
            <label asp-for="AddressTypeId" class="col-form-label">@Loc["Address.Fields.AddressType"]:</label>
            <select asp-for="AddressTypeId" asp-items="@AddressType.Any.ToSelectList(Context, false).ToList()" class="form-control custom-select"></select>
        </div>
    }
    @if (Model.CustomAddressAttributes.Any())
    {
        <partial name="Partials/AddressAttributes" model="Model.CustomAddressAttributes" />
    }
    <div id="errors-address"></div>
</div>
<script asp-location="Footer" asp-order="301">
    var createorupdateaddress@{@prefix} = new Vue({
            data: () => ({
                @{
                    <text>
                        Name: '@Html.Raw(Model.Name)',
                        FirstName: '@Html.Raw(Model.FirstName)',
                        LastName: '@Html.Raw(Model.LastName)',
                        Company: '@Html.Raw(Model.Company)',
                        Address1: '@Html.Raw(Model.Address1)',
                        Address2: '@Html.Raw(Model.Address2)',
                        ZipPostalCode: '@Html.Raw(Model.ZipPostalCode)',
                        City: '@Html.Raw(Model.City)',
                        CountryId: '@Model.CountryId',
                        StateProvinceId: '@Model.StateProvinceId',
                        PhoneNumber: '@Html.Raw(Model.PhoneNumber)',
                        FaxNumber: '@Html.Raw(Model.FaxNumber)',
                        VatNumber: '@Html.Raw(Model.VatNumber)',
                        Email: '@Html.Raw(Model.Email)',
                        prefix: '@prefix',
                        @foreach (var item in Model.CustomAddressAttributes)
                        {
                            @switch (item.AttributeControlType)
                            {
                                case AttributeControlType.DropdownList:
                                {
                                    @foreach (var itemValue in item.Values)
                                    {
                                        if (itemValue.IsPreSelected)
                                        {
                                            <text>address_attribute_</text> @item.Id <text>: '@itemValue.Id',</text>
                                            break;
                                        } else {
                                            <text>address_attribute_</text> @item.Id <text>: '',</text>
                                        }
                                    }
                                }
                                break;
                                case AttributeControlType.Checkboxes:
                                case AttributeControlType.RadioList:
                                case AttributeControlType.ReadonlyCheckboxes:
                                {
                                    <text>address_attribute_</text> @item.Id <text>: [
                                        @foreach (var itemValue in item.Values)
                                        {
                                            if (itemValue.IsPreSelected)
                                            {
                                                <text>'@itemValue.Id',</text>
                                            } else {
                                                 <text>'',</text>
                                            }
                                        }
                                    ],</text>
                                }
                                break;
                                case AttributeControlType.TextBox:
                                case AttributeControlType.MultilineTextbox:
                                {
                                    <text>address_attribute_</text> @item.Id <text>: @if (item.DefaultValue != null) { <text>'@item.DefaultValue'</text> } else { <text>''</text> },</text>
                                }
                                break;
                            }

                        }
                    </text>
                }
        }),
        created() {
            document.addEventListener("DOMContentLoaded", function () {
                document.querySelectorAll("[data-checked='true']").forEach(function (element) {
                    element.checked = true;
                })
            });
        }
    });
</script>