@model AddressModel

<script>
    $(document).ready(function () {
        $("#@Html.IdFor(model => model.CountryId)").change(function () {
            var selectedItem = $(this).val();
            var ddlStates = $("#@Html.IdFor(model => model.StateProvinceId)");
            $.ajax({
                cache: false,
                type: "GET",
                url: "@(Url.Action("GetStatesByCountryId", "Country"))",
                data: {
                    "countryId": selectedItem,
                    "addSelectStateItem": "false"
                },
                success: function (data, textStatus, jqXHR) {
                    ddlStates.html('');
                    $.each(data,
                        function (id, option) {
                            ddlStates.append($('<option></option>').val(option.id).html(option.name));
                        });
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    $("#statesAlert").click();
                }
            });
        });
    });
</script>

<input asp-for="Id" type="hidden" />
<input asp-for="FirstNameRequired" type="hidden" />
<input asp-for="LastNameRequired" type="hidden" />
<input asp-for="EmailRequired" type="hidden" />
<input asp-for="CompanyRequired" type="hidden" />
<input asp-for="CountryRequired" type="hidden" />
<input asp-for="CountyRequired" type="hidden" />
<input asp-for="CityRequired" type="hidden" />
<input asp-for="StreetAddressRequired" type="hidden" />
<input asp-for="StreetAddress2Required" type="hidden" />
<input asp-for="ZipPostalCodeRequired" type="hidden" />
<input asp-for="PhoneRequired" type="hidden" />
<input asp-for="FaxRequired" type="hidden" />

<div class="form-group row">
    <div class="col-md-3">
        <nop-label asp-for="FirstName" />
    </div>
    <div class="col-md-9">
        <nop-editor asp-for="FirstName" asp-required="@Model.FirstNameRequired" />
        <span asp-validation-for="FirstName"></span>
    </div>
</div>
<div class="form-group row">
    <div class="col-md-3">
        <nop-label asp-for="LastName" />
    </div>
    <div class="col-md-9">
        <nop-editor asp-for="LastName" asp-required="@Model.LastNameRequired" />
        <span asp-validation-for="LastName"></span>
    </div>
</div>
<div class="form-group row">
    <div class="col-md-3">
        <nop-label asp-for="Email" />
    </div>
    <div class="col-md-9">
        <nop-editor asp-for="Email" asp-required="@Model.EmailRequired" />
        <span asp-validation-for="Email"></span>
    </div>
</div>
<div class="form-group row">
    <div class="col-md-3">
        <nop-label asp-for="Company" />
    </div>
    <div class="col-md-9">
        <nop-editor asp-for="Company" asp-required="@Model.CompanyRequired" />
        <span asp-validation-for="Company"></span>
    </div>
</div>
<div class="form-group row">
    <div class="col-md-3">
        <nop-label asp-for="CountryId" />
    </div>
    <div class="col-md-9">
        <nop-select asp-for="CountryId" asp-items="Model.AvailableCountries" asp-required="@Model.CountryRequired" />
        <span asp-validation-for="CountryId"></span>
    </div>
</div>
<div class="form-group row">
    <div class="col-md-3">
        <nop-label asp-for="StateProvinceId" />
    </div>
    <div class="col-md-9">
        <nop-select asp-for="StateProvinceId" asp-items="Model.AvailableStates" />
        <span asp-validation-for="StateProvinceId"></span>
    </div>
</div>
<div class="form-group row">
    <div class="col-md-3">
        <nop-label asp-for="County" />
    </div>
    <div class="col-md-9">
        <nop-editor asp-for="County" asp-required="@Model.CountyRequired" />
        <span asp-validation-for="County"></span>
    </div>
</div>
<div class="form-group row">
    <div class="col-md-3">
        <nop-label asp-for="City" />
    </div>
    <div class="col-md-9">
        <nop-editor asp-for="City" asp-required="@Model.CityRequired" />
        <span asp-validation-for="City"></span>
    </div>
</div>
<div class="form-group row">
    <div class="col-md-3">
        <nop-label asp-for="Address1" />
    </div>
    <div class="col-md-9">
        <nop-editor asp-for="Address1" asp-required="@Model.StreetAddressRequired" />
        <span asp-validation-for="Address1"></span>
    </div>
</div>
<div class="form-group row">
    <div class="col-md-3">
        <nop-label asp-for="Address2" />
    </div>
    <div class="col-md-9">
        <nop-editor asp-for="Address2" asp-required="@Model.StreetAddress2Required" />
        <span asp-validation-for="Address2"></span>
    </div>
</div>
<div class="form-group row">
    <div class="col-md-3">
        <nop-label asp-for="ZipPostalCode" />
    </div>
    <div class="col-md-9">
        <nop-editor asp-for="ZipPostalCode" asp-required="@Model.ZipPostalCodeRequired" />
        <span asp-validation-for="ZipPostalCode"></span>
    </div>
</div>
<div class="form-group row">
    <div class="col-md-3">
        <nop-label asp-for="PhoneNumber" />
    </div>
    <div class="col-md-9">
        <nop-editor asp-for="PhoneNumber" asp-required="@Model.PhoneRequired" />
        <span asp-validation-for="PhoneNumber"></span>
    </div>
</div>
<div class="form-group row">
    <div class="col-md-3">
        <nop-label asp-for="FaxNumber" />
    </div>
    <div class="col-md-9">
        <nop-editor asp-for="FaxNumber" asp-required="@Model.FaxRequired" />
        <span asp-validation-for="FaxNumber"></span>
    </div>
</div>

@if (Model.CustomAddressAttributes.Count > 0)
{
    @await Html.PartialAsync("_AddressAttributes", Model.CustomAddressAttributes)
}
<nop-alert asp-alert-id="statesAlert" asp-alert-message="@T("Admin.Common.Alert.States.Failed")" />