Untitled

@page "/screenA"
@using MongoDB.Driver
@inject IMongoDatabase _mongoDatabase

<h3>Select an Option</h3>
<select @onchange="OnOptionSelected">
    <option value="">Select an option</option>
    @foreach (var option in options)
    {
        <option value="@option">@option</option>
    }
</select>

@code {
    private List<string> options = new List<string>();

    protected override async Task OnInitializedAsync()
    {
        var collection = _mongoDatabase.GetCollection<BsonDocument>("YourCollectionName");
        var documents = await collection.Find(Builders<BsonDocument>.Filter.Empty).ToListAsync();
        options = documents.Select(doc => doc["fieldName"].AsString).ToList();
    }

    private void OnOptionSelected(ChangeEventArgs e)
    {
        NavigationManager.NavigateTo($"screenB?selectedOption={e.Value}");
    }
}


@page "/screenB"
@page "/screenB/{selectedOption}"
@using Microsoft.AspNetCore.Components.Web
@using System.Collections.Generic

<h3>Selected Option: @selectedOption</h3>

<div class="toolbar">
    <button @onclick="OnPreviousClick" disabled="@IsFirstBoxSelected">Previous</button>
    <button @onclick="OnNextClick" disabled="@IsLastBoxSelected">Next</button>
    <button @onclick="OnUpdateClick">Update</button>
    <button @onclick="OnDeleteClick">Delete</button>
</div>

<div class="box-container">
    @foreach (var box in boxes)
    {
        <div class="box @(box.IsHighlighted ? "highlighted" : "")" @onclick="() => OnBoxClick(box)">
            <h4>@box.Title</h4>
            <img src="@box.ImageUrl" alt="@box.Title" />

            @if (box.IsSourceProduct)
            {
                <div class="buy-multiple">
                    <input type="checkbox" @bind="box.BuyMultiple" />
                    <select @if="box.BuyMultiple" @bind="box.Quantity">
                        @for (int i = 2; i <= 12; i++)
                        {
                            <option value="@i">@i</option>
                        }
                    </select>
                </div>
            }
        </div>
    }
</div>

@code {
    [Parameter] public string SelectedOption { get; set; }

    private List<BoxModel> boxes = new List<BoxModel>();
    private int currentIndex = 0;

    private BoxModel selectedBox => boxes[currentIndex];

    private bool IsFirstBoxSelected => currentIndex == 0;
    private bool IsLastBoxSelected => currentIndex == boxes.Count - 1;

    protected override void OnInitialized()
    {
        // Fetch boxes based on the selected option from your data source
        boxes = FetchBoxesBasedOnSelectedOption(SelectedOption);
    }

    private void OnPreviousClick()
    {
        if (!IsFirstBoxSelected)
        {
            currentIndex--;
        }
    }

    private void OnNextClick()
    {
        if (!IsLastBoxSelected)
        {
            currentIndex++;
        }
    }

    private void OnBoxClick(BoxModel box)
    {
        box.IsHighlighted = !box.IsHighlighted;
    }

    private void OnUpdateClick()
    {
        // Handle update logic here
        // Access the selectedBox to update its properties
    }

    private void OnDeleteClick()
    {
        // Handle delete logic here
        // You can remove the selectedBox using "boxes.RemoveAt(currentIndex)"
    }

    public class BoxModel
    {
        public string Title { get; set; }
        public string ImageUrl { get; set; }
        public bool IsHighlighted { get; set; }
        public bool IsSourceProduct { get; set; } = false;
        public bool BuyMultiple { get; set; } = false;
        public int Quantity { get; set; } = 2;
    }
}


.box-container {
    display: flex;
    flex-wrap: wrap;
}

.box {
    border: 1px solid #ccc;
    padding: 10px;
    margin: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.highlighted {
    background-color: lightgreen;
}

.box img {
    max-width: 100%;
    height: auto;
}

.toolbar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.toolbar button {
    padding: 5px 10px;
    cursor: pointer;
}

.buy-multiple {
    display: flex;
    align-items: center;
    margin-top: 5px;
}

.buy-multiple input {
    margin-right: 5px;
}

.buy-multiple select {
    width: 50px;
}