@using RadzenBlazorDemos.Models.Northwind
@inherits DbContextPage
@inject NotificationService NotificationService

<RadzenStack class="rz-p-0 rz-p-md-12">
    <RadzenTemplateForm TItem="Model" Data=@model Submit="@OnSubmit" InvalidSubmit="@OnIvalidSubmit">
        <RadzenFieldset Text="Category and products">
            <RadzenStack Gap="2rem" class="rz-p-4 rz-p-md-12">
                <RadzenRow AlignItems="AlignItems.Center" RowGap="0.25rem">
                    <RadzenColumn Size="12" SizeMD="4" class="rz-text-align-start rz-text-align-md-end">
                        <RadzenLabel Text="Category" />
                    </RadzenColumn>
                    <RadzenColumn Size="12" SizeMD="8">
                        <RadzenDropDown Name="Category" Change="@CategoryChange" @bind-Value=@model.CategoryName Data="@categories" TextProperty="@nameof(Category.CategoryName)" ValueProperty="@nameof(Category.CategoryName)" Placeholder="Select category" Style="display: block; width: 100%;" />
                        <RadzenRequiredValidator Component="Category" Text="Category is required" Style="position: absolute"/>
                    </RadzenColumn>
                </RadzenRow>
                <RadzenRow AlignItems="AlignItems.Center" RowGap="0.25rem">
                    <RadzenColumn Size="12" SizeMD="4" class="rz-text-align-start rz-text-align-md-end">
                        <RadzenLabel Text="Last Name" Component="LastName" />
                    </RadzenColumn>
                    <RadzenColumn Size="12" SizeMD="8">
                        <RadzenDropDown MaxSelectedLabels="2" Multiple="true" Name="Products" @bind-Value=@model.Products Data="@products" TextProperty="@nameof(Product.ProductName)" ValueProperty="@nameof(Product.ProductName)" Placeholder="Select products" Style="display: block; width: 100%;" />
                        <RadzenRequiredValidator Component="Products" Text="Products are required" Style="position: absolute"/>
                    </RadzenColumn>
                </RadzenRow>
                <RadzenRow AlignItems="AlignItems.Center" class="rz-mt-4">
                    <RadzenColumn Size="12" Offset="0" SizeMD="8" OffsetMD="4">
                        <RadzenButton ButtonType="ButtonType.Submit" Text="Submit"></RadzenButton>
                    </RadzenColumn>
                </RadzenRow>
            </RadzenStack>
        </RadzenFieldset>
    </RadzenTemplateForm>
</RadzenStack>

@code {
    class Model
    {
        public string CategoryName { get; set; }
        public IEnumerable<string> Products { get; set; }
    }

    Model model = new Model();
    IEnumerable<Category> categories;
    IEnumerable<Product> products;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        categories = dbContext.Categories.ToList();
    }

    void CategoryChange()
    {
        products = dbContext.Products.Where(p => p.Category.CategoryName == model.CategoryName).ToList();
        model.Products = null;
    }

    void OnSubmit()
    {
        NotificationService.Notify(NotificationSeverity.Success, "Success", "Form submitted successfully!");
    }

    void OnIvalidSubmit()
    {
        NotificationService.Notify(NotificationSeverity.Error, "Error", "Form has errors!");
    }
}