@model SuperShop.Web.Models.ChangeUserViewModel
@{
    ViewData["Title"] = "ChangeUser";
}

<h1>ChangeUser</h1>

<div class="row">
    <div class="col-md-4 offset-md-4">
        <form method="post">
            <div asp-validation-summary="ModelOnly"></div>

            <div class="form-group">
                <label asp-for="FirstName">First Name</label>
                <input asp-for="FirstName" class="form-control" />
                <span asp-validation-for="FirstName" class="text-warning"></span>
            </div>

            <div class="form-group">
                <label asp-for="LastName">Last Name</label>
                <input asp-for="LastName" class="form-control" />
                <span asp-validation-for="LastName" class="text-warning"></span>
            </div>
             <div class="form-group">
                <label asp-for="CountryId" class="control-label"></label>
                <select asp-for="CountryId" asp-items="Model.Countries" class="form-control"></select>
                <span asp-validation-for="CountryId" class="text-danger"></span>
            </div>

            <div class="form-group">
                <label asp-for="CityId" class="control-label"></label>
                <select asp-for="CityId" asp-items="Model.Cities" class="form-control"></select>
                <span asp-validation-for="CityId" class="text-danger"></span>
            </div>

            <div class="form-group">
                <label asp-for="Address">Address</label>
                <input asp-for="Address" class="form-control" />
                <span asp-validation-for="Address" class="text-warning"></span>
            </div>

            <div class="form-group">
                <label asp-for="PhoneNumber">Phone Number</label>
                <input asp-for="PhoneNumber" class="form-control" />
                <span asp-validation-for="PhoneNumber" class="text-warning"></span>
            </div>

            <div class="form-group">
                <input type="submit" value="Update" class="btn btn-primary" />
                <a asp-action="ChangePassword" class="btn btn-success">Change Password</a>
            </div>

            <div class="text success">@ViewBag.UserMessage</div>
        </form>
    </div>
</div>
@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
        <script type="text/javascript">
        $(document).ready(function () {
            $("#CountryId").change(function () {
                $("#CityId").empty();
                $.ajax({
                    url: '@Url.Action("GetCitiesAsync","Account")',
                    type: 'POST',
                    dataType: 'json',
                    data: {countryId:$("#CountryId").val()},
                    success: function (cities) {
                        debugger;
                        $("#CityId").append('<option value="0">(Select a city...)</option>');
                        $.each(cities, function (i, city) {
                            $("#CityId").append('<option value="'
                                + city.id + '">'
                                + city.name + '</option>');
                        });
                    },
                    error: function (ex) {
                        debugger;
                        alert('Failed to retrieve cities.' + ex);
                    }
                });
                return false;
            })
        });
    </script>

    }


