@model VendorAddressModel
@{
    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);
                        });
                        createorupdatevendoraddress.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" />
<b-row class="edit-address">
    @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="createorupdatevendoraddress.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.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="createorupdatevendoraddress.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="createorupdatevendoraddress.StateProvinceId"></select>
                <span class="field-validation-error">{{ errors[0] }}</span>
                <span asp-validation-for="StateProvinceId"></span>
                <span id="states-loading-progress" style="display: none;" class="please-wait">@Loc["Common.Wait..."]</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="createorupdatevendoraddress.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="createorupdatevendoraddress.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="createorupdatevendoraddress.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="createorupdatevendoraddress.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="createorupdatevendoraddress.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="createorupdatevendoraddress.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>
    }
</b-row>
<script asp-location="Footer" asp-order="301">
    var createorupdatevendoraddress = new Vue({
            data: () => ({
                @{
                    <text>
                        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)',
                        prefix: '@prefix'
                    </text>
                }
            })
        });
</script>