@model CustomerModel

@using Newtonsoft.Json
@if (Model.CountryEnabled && Model.StateProvinceEnabled)
{
    <script>
        $(function() {
            $("#@Html.IdFor(model => model.CountryId)").change(function() {
                var selectedItem = $(this).val();
                var ddlStates = $("#@Html.IdFor(model => model.StateProvinceId)");

                var postData = {
                    countryId: selectedItem,
                    addSelectStateItem: "true"
                };

                $.ajax({
                    cache: false,
                    type: "GET",
                    url: "@(Url.Action("GetStatesByCountryId", "Country"))",
                    data: postData,
                    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").trigger("click");
                    }
                });
            });
        });
    </script>
}

<div class="card-body">

    @if (Model.UsernamesEnabled)
    {
        <div class="form-group row">
            <div class="col-md-3">
                <nop-label asp-for="Username" />
            </div>
            <div class="col-md-9">
                <nop-editor asp-for="Username" />
                <span asp-validation-for="Username"></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" />
            <span asp-validation-for="Email"></span>
        </div>
    </div>
    <div class="form-group row">
        <div class="col-md-3">
            <nop-label asp-for="Password" />
        </div>
        <div class="col-md-9">
            <div class="input-group">
                <nop-editor asp-for="Password" html-attributes="@(new { autocomplete = "new-password" })"/>
                <div class="input-group-append">
                    @if (Model.Id > 0)
                    {
                        <button type="submit" name="changepassword" class="btn btn-info">
                            @T("Admin.Customers.Customers.Fields.Password.Change")
                        </button>
                    }
                </div>
            </div>
            <span asp-validation-for="Password"></span>
        </div>
    </div>
    <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" />
            <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" />
            <span asp-validation-for="LastName"></span>
        </div>
    </div>
    @if (Model.GenderEnabled)
    {
        <div class="form-group row">
            <div class="col-md-3">
                <nop-label asp-for="Gender" />
            </div>
            <div class="col-md-9">
                <div class="raw">
                    <div class="form-check">
                        <input type="radio" class="form-check-input" name="Gender" id="Gender_Male" value="M" @(Model.Gender == "M" ? Html.Raw("checked") : null)>
                        <label class="form-check-label" for="Gender_Male">
                            @T("Admin.Customers.Customers.Fields.Gender.Male")
                        </label>
                    </div>
                    <div class="form-check">
                        <input type="radio" class="form-check-input" name="Gender" id="Gender_Female" value="F" @(Model.Gender == "F" ? Html.Raw("checked") : null)>
                        <label class="form-check-label" for="Gender_Female">
                            @T("Admin.Customers.Customers.Fields.Gender.Female")
                        </label>
                    </div>
                    @if (Model.NeutralGenderEnabled)
                    {
                        <div class="form-check">
                            <input type="radio" class="form-check-input" name="Gender" id="Gender_Neutral" value="N" @(Model.Gender == "N" ? Html.Raw("checked") : null)>
                            <label class="form-check-label" for="Gender_Female">
                                @T("Admin.Customers.Customers.Fields.Gender.Neutral")
                            </label>
                        </div>
                    }
                </div>
            </div>
        </div>
    }
    @if (Model.DateOfBirthEnabled)
    {
        <div class="form-group row">
            <div class="col-md-3">
                <nop-label asp-for="DateOfBirth" />
            </div>
            <div class="col-md-9">
                <nop-editor asp-for="DateOfBirth" />
                <span asp-validation-for="DateOfBirth"></span>
            </div>
        </div>
    }
    @if (Model.CompanyEnabled)
    {
        <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" />
                <span asp-validation-for="Company"></span>
            </div>
        </div>
    }
    @if (Model.StreetAddressEnabled)
    {
        <div class="form-group row">
            <div class="col-md-3">
                <nop-label asp-for="StreetAddress" />
            </div>
            <div class="col-md-9">
                <nop-editor asp-for="StreetAddress" />
                <span asp-validation-for="StreetAddress"></span>
            </div>
        </div>
    }
    @if (Model.StreetAddress2Enabled)
    {
        <div class="form-group row">
            <div class="col-md-3">
                <nop-label asp-for="StreetAddress2" />
            </div>
            <div class="col-md-9">
                <nop-editor asp-for="StreetAddress2" />
                <span asp-validation-for="StreetAddress2"></span>
            </div>
        </div>
    }
    @if (Model.ZipPostalCodeEnabled)
    {
        <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" />
                <span asp-validation-for="ZipPostalCode"></span>
            </div>
        </div>
    }
    @if (Model.CityEnabled)
    {
        <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" />
                <span asp-validation-for="City"></span>
            </div>
        </div>
    }
    @if (Model.CountyEnabled)
    {
        <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" />
                <span asp-validation-for="County"></span>
            </div>
        </div>
    }
    @if (Model.CountryEnabled)
    {
        <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" />
                <span asp-validation-for="CountryId"></span>
            </div>
        </div>
    }
    @if (Model.CountryEnabled && Model.StateProvinceEnabled)
    {
        <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>
    }
    @if (Model.PhoneEnabled)
    {
        <div class="form-group row">
            <div class="col-md-3">
                <nop-label asp-for="Phone" />
            </div>
            <div class="col-md-9">
                <nop-editor asp-for="Phone" />
                <span asp-validation-for="Phone"></span>
            </div>
        </div>
    }
    @if (Model.FaxEnabled)
    {
        <div class="form-group row">
            <div class="col-md-3">
                <nop-label asp-for="Fax" />
            </div>
            <div class="col-md-9">
                <nop-editor asp-for="Fax" />
                <span asp-validation-for="Fax"></span>
            </div>
        </div>
    }
    @if (Model.CustomerAttributes.Count > 0)
    {
        @await Html.PartialAsync("_CustomerAttributes", Model.CustomerAttributes)
    }
    <div class="form-group row">
        <div class="col-md-3">
            <nop-label asp-for="IsTaxExempt" />
        </div>
        <div class="col-md-9">
            <nop-editor asp-for="IsTaxExempt" />
            <span asp-validation-for="IsTaxExempt"></span>
        </div>
    </div>
    @if (Model.DisplayVatNumber)
    {
        <div class="form-group row">
            <div class="col-md-3">
                <nop-label asp-for="VatNumber" />
            </div>
            <div class="col-md-9">
                <nop-editor asp-for="VatNumber" />
                <div class="margin-t-5">
                    (@string.Format(T("Admin.Customers.Customers.Fields.VatNumberStatus").Text, Model.VatNumberStatusNote))
                    <button type="submit" name="markVatNumberAsValid" class="btn btn-primary">
                        @T("Admin.Customers.Customers.Fields.VatNumber.MarkAsValid")
                    </button>
                    <button type="submit" name="markVatNumberAsInvalid" class="btn btn-danger">
                        @T("Admin.Customers.Customers.Fields.VatNumber.MarkAsInvalid")
                    </button>
                </div>
                <span asp-validation-for="VatNumber"></span>
            </div>
        </div>
    }
    @if (Model.AllowCustomersToSetTimeZone)
    {
        <div class="form-group row">
            <div class="col-md-3">
                <nop-label asp-for="TimeZoneId" />
            </div>
            <div class="col-md-9">
                <nop-select asp-for="TimeZoneId" asp-items="Model.AvailableTimeZones" />
                <span asp-validation-for="TimeZoneId"></span>
            </div>
        </div>
    }
    @if (Model.AvailableNewsletterSubscriptionStores != null && Model.AvailableNewsletterSubscriptionStores.Count > 0)
    {
        <div class="form-group row">
            <div class="col-md-3">
                <nop-label asp-for="SelectedNewsletterSubscriptionStoreIds" />
            </div>
            <div class="col-md-9">
                <div class="input-group-append">
                    <div class="input-group">
                        <nop-select asp-for="SelectedNewsletterSubscriptionStoreIds" asp-items="Model.AvailableNewsletterSubscriptionStores" asp-multiple="true" />
                    </div>
                    <div class="input-group-btn"></div>
                </div>
                <script>
                $(function() {
                    var newsletterSubscriptionStoreIdsInput = $('#@Html.IdFor(model => model.SelectedNewsletterSubscriptionStoreIds)').select2();
                });
                </script>
            </div>
        </div>
    }
    <div class="form-group row">
        <div class="col-md-3">
            <nop-label asp-for="SelectedCustomerRoleIds" />
        </div>

        <div class="col-md-9">            
            <div class="input-group-append input-group-required">
                <div class="input-group">
                    <nop-select asp-for="SelectedCustomerRoleIds" asp-items="Model.AvailableCustomerRoles" asp-multiple="true" />
                </div>
                <div class="input-group-btn">
                    <nop-required />
                </div>
            </div>
            <script>
                $(function() {
                    var customerRoleIdsInput = $('#@Html.IdFor(model => model.SelectedCustomerRoleIds)').select2({
                        closeOnSelect: false,
                        @if (!Model.AvailableCustomerRoles.Any())
                        {
                        <text>
                        disabled: true,
                        placeholder: '@T("Admin.Customers.Customers.Fields.CustomerRoles.NoRoles")',
                        </text>
                        }
                    });
                });
            </script>
        </div>
    </div>
    <div class="form-group row">
        <div class="col-md-3">
            <nop-label asp-for="VendorId" />
        </div>
        <div class="col-md-9">
            <nop-select asp-for="VendorId" asp-items="Model.AvailableVendors" />
            <span asp-validation-for="VendorId"></span>
            <em>@T("Admin.Customers.Customers.VendorShouldBeInVendorsRole")</em>
        </div>
    </div>
    @if (Model.AffiliateId > 0)
    {
        <div class="form-group row">
            <div class="col-md-3">
                <nop-label asp-for="AffiliateId" />
            </div>
            <div class="col-md-9">
                <a asp-controller="Affiliate" asp-action="Edit" asp-route-id="@Model.AffiliateId">@Model.AffiliateName - @T("Admin.Common.View")</a>
                <button type="submit" name="remove-affiliate" class="btn btn-danger">
                    @T("Admin.Customers.Customers.Fields.Affiliate.Remove")
                </button>
            </div>
        </div>
    }
    <div class="form-group row">
        <div class="col-md-3">
            <nop-label asp-for="Active" />
        </div>
        <div class="col-md-9">
            <nop-editor asp-for="Active" />
            <span asp-validation-for="Active"></span>
        </div>
    </div>
    @if (!string.IsNullOrEmpty(Model.MultiFactorAuthenticationProvider))
    {
        <div class="form-group row">
            <div class="col-md-3">
                <nop-label asp-for="MultiFactorAuthenticationProvider" />
            </div>
            <div class="col-md-9">
                <div class="input-group">
                    <nop-editor asp-for="MultiFactorAuthenticationProvider" html-attributes="@(new { disabled = true })"/>
                    <div class="input-group-append">
                        @if (Model.Id > 0)
                        {
                            <a id="mfa-bind-delete" href="#" class="btn btn-danger">
                                @T("Admin.Common.Delete")
                            </a>
                        }
                    </div>
                </div>
                <span asp-validation-for="MultiFactorAuthenticationProvider"></span>
            </div>
        </div>
    }

    @if (Model.Id > 0 && Model.CustomerAssociatedExternalAuthRecordsSearchModel.AssociatedExternalAuthRecords.Count > 0)
    {
        <div class="form-group row">
            <div class="col-md-3">
                <nop-label asp-for="CustomerAssociatedExternalAuthRecordsSearchModel.AssociatedExternalAuthRecords" />
            </div>
            <div class="col-md-9">
                @await Html.PartialAsync("Table", new DataTablesModel
                {
                    Name = "externalauthrecords-grid",
                    Paging = false,
                    ServerSide = false,
                    Length = Model.CustomerAssociatedExternalAuthRecordsSearchModel.PageSize,
                    LengthMenu = Model.CustomerAssociatedExternalAuthRecordsSearchModel.AvailablePageSizes,
                    ColumnCollection = new List<ColumnProperty>
                    {
                        new ColumnProperty(nameof(CustomerAssociatedExternalAuthModel.AuthMethodName))
                        {
                            Title = T("Admin.Customers.Customers.AssociatedExternalAuth.Fields.AuthMethodName").Text,
                            Width = "100"
                        },
                        new ColumnProperty(nameof(CustomerAssociatedExternalAuthModel.Email))
                        {
                            Title = T("Admin.Customers.Customers.AssociatedExternalAuth.Fields.Email").Text,
                            Width = "100"
                        },
                        new ColumnProperty(nameof(CustomerAssociatedExternalAuthModel.ExternalIdentifier))
                        {
                            Title = T("Admin.Customers.Customers.AssociatedExternalAuth.Fields.ExternalIdentifier").Text,
                            Width = "300"
                        }
                    },
                    Data = JsonConvert.SerializeObject(Model.CustomerAssociatedExternalAuthRecordsSearchModel.AssociatedExternalAuthRecords.Select(externalAuthRecord => new
                    {
                        //We must display this data encoded, since the data can contain Unicode characters or malicious exploits
                        AuthMethodName = WebUtility.HtmlEncode(externalAuthRecord.AuthMethodName),
                        Email = WebUtility.HtmlEncode(externalAuthRecord.Email),
                        ExternalIdentifier = WebUtility.HtmlEncode(externalAuthRecord.ExternalIdentifier)
                    }).ToList())
                })
            </div>
        </div>
    }
    <div class="form-group row">
        <div class="col-md-3">
            <nop-label asp-for="MustChangePassword" />
        </div>
        <div class="col-md-9">
            <nop-editor asp-for="MustChangePassword" />
            <span asp-validation-for="MustChangePassword"></span>
        </div>
    </div>
    <div class="form-group row">
        <div class="col-md-3">
            <nop-label asp-for="AdminComment" />
        </div>
        <div class="col-md-9">
            <nop-textarea asp-for="AdminComment" />
            <span asp-validation-for="AdminComment"></span>
        </div>
    </div>
    @if (Model.DisplayRegisteredInStore)
    {
        <div class="form-group row">
            <div class="col-md-3">
                <nop-label asp-for="RegisteredInStore" />
            </div>
            <div class="col-md-9">
                <div class="form-text-row">@Model.RegisteredInStore</div>
            </div>
        </div>
    }
    @if (Model.Id > 0)
    {
        <div class="form-group row">
            <div class="col-md-3">
                <nop-label asp-for="LastIpAddress" />
            </div>
            <div class="col-md-9">
                <div class="form-text-row">@Model.LastIpAddress</div>
            </div>
        </div>
    }
    @if (Model.Id > 0)
    {
        <div class="form-group row">
            <div class="col-md-3">
                <nop-label asp-for="CreatedOn" />
            </div>
            <div class="col-md-9">
                <div class="form-text-row">@Model.CreatedOn</div>
            </div>
        </div>
    }
    @if (Model.Id > 0)
    {
        <div class="form-group row">
            <div class="col-md-3">
                <nop-label asp-for="LastActivityDate" />
            </div>
            <div class="col-md-9">
                <div class="form-text-row">@Model.LastActivityDate</div>
            </div>
        </div>
    }
    @if (Model.Id > 0 && !string.IsNullOrEmpty(Model.LastVisitedPage))
    {
        <div class="form-group row">
            <div class="col-md-3">
                <nop-label asp-for="LastVisitedPage" />
            </div>
            <div class="col-md-9">
                <div class="form-text-row">@Model.LastVisitedPage</div>
            </div>
        </div>
    }
</div>

<nop-alert asp-alert-id="statesAlert" asp-alert-message="@T("Admin.Common.Alert.States.Failed")" />