Mango.Nop.Plugins/Nop.Plugin.Misc.AuctionPlugin/Views/LiveScreen.cshtml

@model LiveScreenViewModel
@using Nop.Core.Infrastructure
@using Nop.Web.Framework
@using Nop.Plugin.Misc.AuctionPlugin.Domains.Dtos;

@{
    var defaultGridPageSize = EngineContext.Current.Resolve<Nop.Core.Domain.Common.AdminAreaSettings>().DefaultGridPageSize;
    var gridPageSizes = EngineContext.Current.Resolve<Nop.Core.Domain.Common.AdminAreaSettings>().GridPageSizes;
    Layout = "Auction/LiveScreenRoot.cshtml";
    //page title

}

@{
    if (Model.IsAnyItemActive)
    {

        <div class="row py-3">
            <!-- Item Image -->
            <div class="col-lg-4 col-md-6 mb-4" style="height: calc(100vh - 100px);">
                <div class="card border-0">
                    <img src="@Model.ActiveProductDetails.DefaultPictureModel.FullSizeImageUrl" class="card-img-top img-fluid" alt="Auction Item Image">
                </div>
                <div class="card bg-transparent">
                    <div class="card-body">
                        <h5 class="card-title mb-3">Bid History</h5>
                        <div class="table-responsive bg-transparent">
                            <table id="bidHistoryTable" class="table-responsive bg-transparent">
                                <thead class="bg-transparent">
                                    <tr>
                                        <th>#</th>
                                        <th>Bid Amount</th>
                                        <th>Account</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-transparent">
                                    <!-- Dynamic Data Populated by DataTable -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Item Details -->
            <div class="col-lg-8 col-md-6" style="height: calc(100vh - 100px);">
                <div class="card border-0 bg-transparent h-100">
                    <div class="card-header border-0 bg-transparent">
                        <div class="row">
                            <div class="col-md-8 col-12">
                                <h1 class="card-title">@Model.ActiveProductDetails.Name</h1>
                                <h2 class="text-muted mb-3">Created by: <span class="font-weight-bold">@Model.ActiveProductDetails.ProductManufacturers.FirstOrDefault().Name</span></h2>
                            </div>
                            <div class="col-md-4 col-12">
                                <h3 class="text-end"> Item no.: @Model.CurrentProductToAuction.SortIndex </h3>
                            </div>
                        </div>
                    </div>
                    <div class="card-body border-0">

                        <!-- Item Information -->
                        <ul class="list-group mb-3 border-0">
                            <li class="bg-transparent fs-4 border-0 list-group-item d-flex justify-content-between align-items-center">
                                <div>
                                    @await Html.PartialAsync("Product/_ProductSpecifications.cshtml", Model.ActiveProductDetails.ProductSpecificationModel)
                                </div>
                                <div>
                                    <span>Base price</span>
                                    <span>@(String.Format("{0:c}", Model.BasePrice))</span>
                                </div>
                                <div>
                                    <span>Actual licit step</span>
                                    <span>@(String.Format("{0:c}", Model.LicitStep))</span>
                                </div>
                            </li>

                            <li class="bg-transparent border-0 list-group-item fs-5">
                                <span class="font-weight-bold">Description:</span>
                                <p class="mb-0 mt-2 text-muted">
                                    @Html.Raw(Model.ActiveProductDetails.FullDescription)
                                </p>
                            </li>
                        </ul>
                    </div>
                    <div class="card-footer h-50 border-0 align-items-center text-center bg-transparent">
                        <span>Current state price</span>
                        <h3 style="font-size: 72px;">
                            @(String.Format("{0:c}", Model.CurrentPrice))
                        </h3>

                    </div>
                </div>
            </div>
        </div>

        <div class="row" style="height:100px; position: fixed; bottom:0px;">
            LOGO
        </div>

    }
    else
    {
        <div class="row mt-4">
            
            <div class="col-12">
                <h1 class="fs-1">@Model.AuctionDto.AuctionName</h1>
            </div>
        </div>

    }
}


<!-- Initialize DataTable -->
<script asp-location="Footer">

    $(document).ready(function () {

        liveScreenPageViewModel = @Html.Raw(Json.Serialize(Model));
        console.log("ViewModel:", liveScreenPageViewModel);

        // Extract and preprocess table data
        var tableData = liveScreenPageViewModel.CurrentProductToAuction.AuctionBidDtos
            .slice(0, 6) // Get the first 6 elements
            .map(item => ({
                Id: item.Id,
                BidPrice: item.BidPrice,
                CustomerId: item.CustomerId
            }));
        console.log("Table Data:", tableData);

        tableData.forEach((element) => console.log(element));
        tableData.forEach((element) => addRowToTable(element));       

            // // Initialize DataTable
            // $('#bidHistoryTable').DataTable({               
            //     "pageLength": 5,
            //     "ordering": false,
            //     "searching": false,
            //     "info": true,
            //     "lengthChange": false,
            //     "columns": [
            //         { "data": "Id" },
            //         { "data": "BidPrice" },
            //         { "data": "CustomerId" }
            //     ]
            // });
        });

    function addRowToTable(tableRow) {
        const table = document.getElementById("bidHistoryTable");
        const row = table.insertRow();

        const cell1 = row.insertCell();
        cell1.textContent = tableRow.Id;

        const cell2 = row.insertCell();
        cell2.textContent = tableRow.BidPrice;

        const cell3 = row.insertCell();
        cell3.textContent = tableRow.CustomerId;

    }

    function reloadOnUpdate() {
        location.reload()
    }
</script>