<style>
    input.k-textbox.form-control,
    k-datetimepicker.form-control,
    .k-widget.k-combobox.k-header.form-control {
        height: calc(2.25rem) !important;
    }
</style>

<div class="container-fluid border pt-md-3">
    <div class="row">
        <h5 class="pl-3 pb-3">nach Geschäftsfall suchen</h5>
    </div>
    <EditForm Model="SuchParameter" OnValidSubmit="HandleValidSubmit">
        <DataAnnotationsValidator />
        <div class="row  mb-1">
            <div class="col-md-4">
                <label for="fallJahr">Fall-Jahr</label>
            </div>
            <div class="col-md-8">
                <TelerikNumericTextBox Id="fallJahrTelerik" @bind-Value="SuchParameter.Jahr" Class="form-control" Arrows="false" />
            </div>
        </div>
        <div class="row  mb-1">
            <div class="col-md-4">
                <label for="fallNummer">Fall-Nr.</label>
            </div>
            <div class="col-md-8">
                <TelerikTextBox Id="fallNummer" @bind-Value="SuchParameter.Nummer" Class="form-control" />
            </div>
        </div>

        <div class="row  mb-1">
            <div class="col-md-4">
                <label for="geschaeftsArt">Geschäftsart</label>
            </div>
            <div class="col-md-8">
                <TelerikComboBox Id="geschaeftsArt" ValueChanged="@( (string c) => OnGeschaeftsArtChanged (c))" Value="selectedGeschaeftsArt" ValueField="Art" TextField="Art" ValueExpression="@( () => selectedGeschaeftsArt )"
                                 Data="@GeschaeftsArten" Placeholder="Geschäftsart auswählen" ClearButton="true" Width="100%" 
                                 Class="form-control"/>
            </div>
        </div>
        <div class="row  mb-1">
            <div class="col-md-4">
                <label for="posteingang">Posteingang </label>
            </div>
            <div class="col-md-8">
                <TelerikDateTimePicker Id=posteingang @bind-Value="@selectedTime" Format="dd.MM.yyyy" Width="100%"
                                       Class="form-control"></TelerikDateTimePicker>
            </div>
        </div>

        <button type="submit" class="btn btn-block btn-primary">Suchen</button>
        <ValidationSummary />
    </EditForm>
</div>

@code{
    public class TheFormModel
    {
        public int Jahr { get; set; }
        public string Nummer { get; set; }
    }

    public class ComboModel
    {
        public string Art { get; set; }
    }

    TheFormModel SuchParameter { get; set; } = new TheFormModel();
    string selectedGeschaeftsArt { get; set; }
    List<ComboModel> GeschaeftsArten { get; set; } = Enumerable.Range(1, 5).Select(x => new ComboModel { Art = $"Art {x}" }).ToList();
    DateTime selectedTime { get; set; }

    void HandleValidSubmit()
    {

    }

    void OnGeschaeftsArtChanged(string v)
    {
        selectedGeschaeftsArt = v;
    }
}

<TelerikChart>
    <ChartTitle Text="Unrecoverable Errors Per Minute vs. Signal Level" />
    <ChartCategoryAxes>
        <ChartCategoryAxis Type="@ChartCategoryAxisType.Category" />
    </ChartCategoryAxes>
    <ChartValueAxes>
        <ChartValueAxis>
            <ChartValueAxisLabels Visible="true" />
        </ChartValueAxis>
    </ChartValueAxes>

    <ChartTooltip Visible="true">
        <Template>
            @{
                var data = context.DataItem as ModelData;
                <div class="card" style="font-size: 0.8rem; color: black">
                    <span>@($"{data.Value}")</span>
                    <span>@($"{data.Type}")</span>

                </div>
            }
        </Template>
    </ChartTooltip>

    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Line"
                     Data="@ChartData1"
                     CategoryField="@nameof(ModelData.Type)"
                     Field="@nameof(ModelData.Value)">
        </ChartSeries>
        <ChartSeries Type="ChartSeriesType.Line"
                     Data="@ChartData2"
                     CategoryField="@nameof(ModelData.Type)"
                     Field="@nameof(ModelData.Value)">
        </ChartSeries>
        <ChartSeries Type="ChartSeriesType.Line"
                     Data="@ChartData3"
                     CategoryField="@nameof(ModelData.Type)"
                     Field="@nameof(ModelData.Value)">
        </ChartSeries>
    </ChartSeriesItems>

</TelerikChart>

@code {
    public class ModelData
    {
        public string Type { get; set; }
        public double Value { get; set; }
    }

    public List<ModelData> ChartData1 = new List<ModelData>() { new ModelData() { Type = "S1", Value = 1 } };
    public List<ModelData> ChartData2 = new List<ModelData>() { new ModelData() { Type = "S2", Value = 5 } };
    public List<ModelData> ChartData3 = new List<ModelData>() { new ModelData() { Type = "S3", Value = 9 } };
}