@implements IAsyncDisposable
@inject IJSRuntime JS

<TelerikGantt Data="@GanttData"
              @bind-View="@CurrentView"
              Class="scrollable-gantt-1"
              IdField="@nameof(FlatModel.Id)"
              ParentIdField="@nameof(FlatModel.ParentId)"
              Width="700px"
              Height="500px">
    <GanttViews>
        <GanttDayView></GanttDayView>
        <GanttWeekView></GanttWeekView>
        <GanttMonthView></GanttMonthView>
        <GanttYearView></GanttYearView>
    </GanttViews>
    <GanttColumns>
        <GanttColumn Field="@nameof(FlatModel.Id)"
                     Visible="false">
        </GanttColumn>
        <GanttColumn Field="@nameof(FlatModel.Title)"
                     Expandable="true"
                     Width="160px"
                     Title="Task Title">
        </GanttColumn>
        <GanttColumn Field="@nameof(FlatModel.PercentComplete)"
                     Title="Completed"
                     Width="60px">
        </GanttColumn>
        <GanttColumn Field="@nameof(FlatModel.Start)"
                     Width="100px"
                     TextAlign="@ColumnTextAlign.Right">
        </GanttColumn>
        <GanttColumn Field="@nameof(FlatModel.End)"
                     DisplayFormat="End: {0:d}"
                     Width="100px">
        </GanttColumn>
    </GanttColumns>
</TelerikGantt>

<script suppress-error="BL9992">
    function initGanttScrollSync(ganttSelector) {
        const ganttTimelineContent = document.querySelector(ganttSelector + " .k-gantt-timeline .k-grid-content");
        if (ganttTimelineContent) {
            ganttTimelineContent.addEventListener("scroll", onGanttTimelineScroll);
        }
    }

    function disposeGanttScrollSync(ganttSelector) {
        const ganttTimelineContent = document.querySelector(ganttSelector + " .k-gantt-timeline .k-grid-content");

        if (ganttTimelineContent) {
            ganttTimelineContent.removeEventListener("scroll", onGanttTimelineScroll);
        }
    }

    function onGanttTimelineScroll(e) {
        const ganttTimelineHeader = e.target.closest(".k-gantt-timeline").querySelector(".k-grid-header-wrap");
        if (ganttTimelineHeader) {
            ganttTimelineHeader.scrollLeft = e.target.scrollLeft;
        }
    }
</script>

@code {
    private List<FlatModel> GanttData { get; set; } = new List<FlatModel>();
    private List<FlatModel> Data { get; set; } = new List<FlatModel>();

    private GanttView CurrentView { get; set; } = GanttView.Week;

    private int LastId { get; set; } = 1;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JS.InvokeVoidAsync("initGanttScrollSync", ".scrollable-gantt-1");
        }

        await base.OnAfterRenderAsync(firstRender);
    }

    public async ValueTask DisposeAsync()
    {
        await JS.InvokeVoidAsync("disposeGanttScrollSync", ".scrollable-gantt-1");
    }

    protected override void OnInitialized()
    {
        GanttData = new List<FlatModel>();
        var random = new Random();

        for (int i = 1; i <= 3; i++)
        {
            var newItem = new FlatModel()
            {
                Id = LastId,
                Title = $"Employee  {i}",
                Start = new DateTime(2020, 12, 10 + i),
                End = new DateTime(2020, 12, 11 + i),
                PercentComplete = Math.Round(random.NextDouble(), 2),
                HasChildren = true
            };

            GanttData.Add(newItem);
            var parentId = LastId;
            LastId++;

            for (int j = 1; j <= 2; j++)
            {
                GanttData.Add(new FlatModel()
                {
                    Id = LastId,
                    ParentId = parentId,
                    Title = $"Employee {i} : {j}",
                    Start = new DateTime(2020, 12, 20 + j),
                    End = new DateTime(2020, 12, 21 + i + j),
                    PercentComplete = Math.Round(random.NextDouble(), 2)
                });

                LastId++;
            }
        }

        base.OnInitialized();
    }

    public class FlatModel
    {
        public int Id { get; set; }
        public int? ParentId { get; set; }
        public string Title { get; set; } = string.Empty;
        public double PercentComplete { get; set; }
        public DateTime Start { get; set; }
        public DateTime End { get; set; }
        public bool HasChildren { get; set; }
    }
}

@page "/test-timepicker-listview"

<h3>TimePicker in ListView Test</h3>

<TelerikListView Data="@TestItems" Width="100%">
    <HeaderTemplate>
        <div style="padding: 10px; background-color: #f0f0f0; font-weight: bold;">
            Time Entry Items
        </div>
    </HeaderTemplate>
    <Template>
        <div style="padding: 15px; border-bottom: 1px solid #ddd;">
            <div style="margin-bottom: 10px;">
                <strong>Item:</strong> @context.Name
            </div>
            <div style="display: flex; align-items: center; gap: 10px;">
                <label>Start Time:</label>
                <TelerikTimePicker @bind-Value="@context.StartTime" Format="hh:mm tt" Width="150px"
                    AdaptiveMode="AdaptiveMode.Auto" />
            </div>
            <div style="display: flex; align-items: center; gap: 10px; margin-top: 10px;">
                <label>End Time:</label>
                <TelerikTimePicker @bind-Value="@context.EndTime" Format="hh:mm tt" Width="150px"
                    AdaptiveMode="AdaptiveMode.Auto" />
            </div>
        </div>
    </Template>
</TelerikListView>

@code {
    private List<TimeEntryItem> TestItems { get; set; } = new();

    protected override void OnInitialized()
    {
        // Initialize with some test data
        TestItems = new List<TimeEntryItem>
{
new TimeEntryItem { Id = 1, Name = "Morning Shift", StartTime = new DateTime(2025, 11, 18, 8, 0, 0), EndTime = new
DateTime(2025, 11, 18, 12, 0, 0) },
};
    }

    public class TimeEntryItem
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public DateTime StartTime { get; set; }
        public DateTime EndTime { get; set; }
    }
}

<TelerikGrid Data="@GridData"
             EditMode="@GridEditMode.Incell"
             OnUpdate="@OnGridUpdate"
             OnCreate="@OnGridCreate">
    <GridToolBarTemplate>
        <GridCommandButton Command="Add">Add Item</GridCommandButton>
    </GridToolBarTemplate>
    <GridColumns>
        <GridColumn Field="@nameof(Product.Name)" />
        <GridColumn Field="@nameof(Product.MaskedValue)">
            <EditorTemplate>
                @{ var dataItem = (Product)context; }
                <TelerikMaskedTextBox @bind-Value="@dataItem.MaskedValue"
                                      Mask="AAA-AAA" />
            </EditorTemplate>
        </GridColumn>
    </GridColumns>
</TelerikGrid>

@code {
    private List<Product> GridData { get; set; } = new();

    private int LastId { get; set; }

    private void OnGridCreate(GridCommandEventArgs args)
    {
        var createdItem = (Product)args.Item;

        createdItem.Id = ++LastId;

        GridData.Insert(0, createdItem);
    }

    private void OnGridUpdate(GridCommandEventArgs args)
    {
        var updatedItem = (Product)args.Item;
        var originalItemIndex = GridData.FindIndex(i => i.Id == updatedItem.Id);

        if (originalItemIndex != -1)
        {
            GridData[originalItemIndex] = updatedItem;
        }
    }

    protected override void OnInitialized()
    {
        for (int i = 1; i <= 5; i++)
        {
            GridData.Add(new Product()
            {
                Id = ++LastId,
                Name = $"Product {LastId}",
                MaskedValue = $"ABC-{LastId:D3}"
            });
        }
    }

    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public string MaskedValue { get; set; } = string.Empty;
    }
}

<TelerikWindow CssScope="my-custom-scope">
</TelerikWindow>

<div ... my-custom-scope>
....
</div>