@model CustomerUserSettingsModel

<div class="card-body">
    <div class="form-group row">
        <div class="col-md-3">
            <nop-label asp-for="CustomerSettings.AllowViewingProfiles" />
        </div>
        <div class="col-md-9">
            <nop-editor asp-for="CustomerSettings.AllowViewingProfiles" />
            <span asp-validation-for="CustomerSettings.AllowViewingProfiles"></span>
        </div>
    </div>
    <div class="form-group row">
        <div class="col-md-3">
            <nop-label asp-for="CustomerSettings.ShowCustomersLocation" />
        </div>
        <div class="col-md-9">
            <nop-editor asp-for="CustomerSettings.ShowCustomersLocation" />
            <span asp-validation-for="CustomerSettings.ShowCustomersLocation"></span>
        </div>
    </div>
    <div class="form-group row">
        <div class="col-md-3">
            <nop-label asp-for="CustomerSettings.ShowCustomersJoinDate" />
        </div>
        <div class="col-md-9">
            <nop-editor asp-for="CustomerSettings.ShowCustomersJoinDate" />
            <span asp-validation-for="CustomerSettings.ShowCustomersJoinDate"></span>
        </div>
    </div>
</div>
<script>
$(document).ready(function () {
    $("#@Html.IdFor(model => model.CustomerSettings.AllowCustomersToUploadAvatars)").click(toggleAvatar);
    $("#@Html.IdFor(model => model.CustomerSettings.UsernamesEnabled)").click(toggleUsername);
    $("#@Html.IdFor(model => model.CustomerSettings.UsernameValidationEnabled)").click(toggleUsernameValidation);
	$("#@Html.IdFor(model => model.CustomerSettings.PhoneNumberValidationEnabled)").click(togglePhoneNumberValidation);
    
	toggleAvatar();
    toggleUsername();
    toggleUsernameValidation();
	togglePhoneNumberValidation();
});

function toggleAvatar() {
    if ($('#@Html.IdFor(model => model.CustomerSettings.AllowCustomersToUploadAvatars)').is(':checked')) {
        $('#pnlDefaultAvatarEnabled').showElement();
    } else {
        $('#pnlDefaultAvatarEnabled').hideElement();
    }
}

function toggleUsername() {
    if ($('#@Html.IdFor(model => model.CustomerSettings.UsernamesEnabled)').is(':checked')) {
        $('#pnlAllowUsersToChangeUsernames').showElement();
        $('#pnlCheckUsernameAvailability').showElement();
        $('#pnlUsernameValidationEnabled').showElement();
    } else {
        $('#pnlAllowUsersToChangeUsernames').hideElement();
        $('#pnlCheckUsernameAvailability').hideElement();
        $('#pnlUsernameValidationEnabled').hideElement();
    }
}

function toggleUsernameValidation() {
    if ($('#@Html.IdFor(model => model.CustomerSettings.UsernameValidationEnabled)').is(':checked')) {
        $('#pnlUsernameValidationRule').showElement();
        $('#pnlUsernameValidationUseRegex').showElement();
    } else {
        $('#pnlUsernameValidationRule').hideElement();
        $('#pnlUsernameValidationUseRegex').hideElement();
    }
}
	
function togglePhoneNumberValidation() {
    if ($('#@Html.IdFor(model => model.CustomerSettings.PhoneNumberValidationEnabled)').is(':checked')) {
        $('#pnlPhoneNumberValidationRule').showElement();
        $('#pnlPhoneNumberValidationUseRegex').showElement();
    } else {
        $('#pnlPhoneNumberValidationRule').hideElement();
        $('#pnlPhoneNumberValidationUseRegex').hideElement();
    }
}
</script>