@page "/register"
@using DxBlazorApplication2.Data.Annotations
@rendermode InteractiveServer
@inject NavigationManager Navigation

<div class="card cw-480" style="width: 400px">
    <EditForm Model="@Data"
              OnValidSubmit="@HandleValidSubmit"
              OnInvalidSubmit="@HandleInvalidSubmit"
              Context="EditFormContext">
        <DataAnnotationsValidator />
        <div class="card-header text-center py-3">
            <h4>Register to DevExpress</h4>
            <p class="tm-8 mb-0 fw-normal fs-825">
                Create a new account to see it in action
            </p>
        </div>
        <div class="card-body">
            <DxFormLayout>
                <DxFormLayoutItem ColSpanMd="12">
                    <label for="tbUsername" class="d-none">Username</label>
                    <DxTextBox @bind-Text="@Data.Username"
                               NullText="Username"
                               ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto"
                               InputId="tbUsername" />
                    <div class="text-danger">
                        <ValidationMessage For="@(() => Data.Username)" />
                    </div>
                </DxFormLayoutItem>
                <DxFormLayoutItem ColSpanMd="12">
                    <label for="tbPassword" class="d-none">Password</label>
                    <DxTextBox @bind-Text="@Data.Password"
                               NullText="Password"
                               Password="true"
                               ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto"
                               InputId="tbPassword" />
                    <div class="text-danger">
                        <ValidationMessage For="@(() => Data.Password)" />
                    </div>
                </DxFormLayoutItem>
                <DxFormLayoutItem ColSpanMd="12">
                    <label for="tbEmail" class="d-none">E-mail</label>
                    <DxTextBox @bind-Text="@Data.Email"
                               NullText="E-mail"
                               ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto"
                               InputId="tbEmail" />
                    <div class="text-danger">
                        <ValidationMessage For="@(() => Data.Email)" />
                    </div>
                </DxFormLayoutItem>
                <DxFormLayoutItem ColSpanMd="12">
                    <label for="miPhone" class="d-none">Phone Number</label>
                    <DxMaskedInput @bind-Value="@Data.Phone"
                                   NullText="Phone Number"
                                   Mask="@PhoneMask"
                                   ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto"
                                   InputId="miPhone" />
                    <div class="text-danger">
                        <ValidationMessage For="@(() => Data.Phone)" />
                    </div>
                </DxFormLayoutItem>
                <DxFormLayoutItem ColSpanMd="12">
                    <label for="deBirthDate" class="d-none">Birthday</label>
                    <DxDateEdit @bind-Date="@Data.BirthDate"
                                NullText="Birthday"
                                NullValue="@BirthDateNullValue"
                                ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto"
                                PickerDisplayMode="DatePickerDisplayMode.Calendar"
                                Mask="@DateTimeMask.ShortDate"
                                InputId="deBirthDate" />
                    <div class="text-danger">
                        <ValidationMessage For="@(() => Data.BirthDate)" />
                    </div>
                </DxFormLayoutItem>
                <DxFormLayoutItem ColSpanMd="12">
                    <label for="cbOccupation" class="d-none">Occupation</label>
                    <DxComboBox Data="@Occupations"
                                @bind-Value="@Data.Occupation"
                                AllowUserInput="false"
                                NullText="Occupation"
                                ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto"
                                InputId="cbOccupation" />
                </DxFormLayoutItem>
                <DxFormLayoutItem ColSpanMd="12">
                    <label for="mNotes" class="d-none">Notes</label>
                    <DxMemo @bind-Text="@Data.Notes"
                            NullText="Notes"
                            Rows="4"
                            ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto"
                            InputId="mNotes" />
                </DxFormLayoutItem>
                <DxFormLayoutItem ColSpanMd="12">
                    <DxButton CssClass="w-100"
                              RenderStyle="ButtonRenderStyle.Primary"
                              SubmitFormOnClick="true"
                              Text="Register" />
                </DxFormLayoutItem>
                <DxFormLayoutItem ColSpanMd="12">
                    <div class="text-center pt-2">
                        <div class="tm-8">
                            Already have an account?
                        </div>
                        <DxButton RenderStyle="ButtonRenderStyle.Link"
                                  Text="Login"
                                  Click="GotoLoginForm" />
                    </div>
                </DxFormLayoutItem>
            </DxFormLayout>
        </div>
    </EditForm>
</div>
<p class="tm-8 cw-480 mt-2">
    @FormSubmitResult
</p>

@code {
    string FormSubmitResult = "";
    UserData Data { get; set; } = new UserData();
    IEnumerable<string> Occupations { get; set; } = new List<string>() {
        "Academic",
        "Administrative",
        "Art/Entertainment",
        "College Student",
        "Community & Social",
        "Computers",
        "Education",
        "Engineering",
        "Financial Services",
        "Government",
        "High School Student",
        "Law",
        "Managerial",
        "Manufacturing",
        "Medical/Health",
        "Military",
        "Non-government Organization",
        "Other Services",
        "Professional",
        "Retail",
        "Science & Research",
        "Sports",
        "Technical",
        "University Student",
        "Web Building",
    };
    string PhoneMask { get; set; } = "(999)000-0000";
    DateTime BirthDateNullValue { get; set; } = UserData.BirthDateNullValue;
    void GotoLoginForm()
    {
        Navigation.NavigateTo("/Login");
    }
    void HandleValidSubmit()
    {
        FormSubmitResult = "You have been registred successully.";
    }
    void HandleInvalidSubmit()
    {
        FormSubmitResult = "";
    }
}