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

@{
    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

}
<style>
    body{
        overflow-y: hidden !important;
    }
</style>
@{
    if (Model.IsAnyItemActive)
    {
        <div class="row py-3">
            <!-- Item Image -->
            <div class="col-lg-4 col-md-6 mb-4" style="height: calc(100vh - 300px);">
                <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 border-0 bg-transparent">
                    <div class="card-body" style="max-height:250px; overflow-y: hidden !important;">
                        <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 - 300px);">
                <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>
                                @if(Model.ActiveProductDetails.ProductManufacturers != null)
                                {
                                    if(Model.ActiveProductDetails.ProductManufacturers.FirstOrDefault() != null)
                                    {         
                                        if(!string.IsNullOrEmpty(Model.ActiveProductDetails.ProductManufacturers.FirstOrDefault().Name))
                                        {                                            
                                            <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>@($"{Model.BasePrice:c}")</span>
                                </div>
                                <div>
                                    <span>Actual licit step</span>
                                    <span id="liveScreenLicitStep">@($"{Model.LicitStep:c}")</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(HttpUtility.HtmlDecode(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 id="liveScreenCurrentPrice" style="font-size: 72px;">
	                        @($"{Model.CurrentPrice:c}")
                        </h3>

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

        <div class="row" style="height:300px;">
            <div class="col-12 text-center">
                <img style="height: 250px; !important" src="../../Plugins/Misc.AuctionPlugin/Content/Images/logo.png" class="img-fluid rounded mx-auto p-5 d-block" />
            </div>
        </div> 

    }
    else
    {
        <div class="row mt-4">          


            <div class="px-4 pt-5 my-5 text-center">
                <h1 class="fs-1">@Model.AuctionDto.AuctionName</h1>
                <div class="col-lg-6 mx-auto">
                  
                </div>
                <div class="" style="max-height: 50vh;">
                  <div class="container position-absolute top-50 start-50 translate-middle">
                    <img style="height: 350px; !important" src="../../Plugins/Misc.AuctionPlugin/Content/Images/logo.png" class="img-fluid rounded mx-auto p-5 d-block" />
                  </div>
                </div>
              </div>


        </div>

    }
}


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

    $(document).ready(function () {

        var liveScreenPageViewModel = @Html.Raw(Json.Serialize(Model));
        console.log("ViewModel:", liveScreenPageViewModel);
        let myUserId = liveScreenPageViewModel.UserCustomerId;
        // 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) {
        var thPageViewModel = @Html.Raw(Json.Serialize(Model));
        let myUserId = thPageViewModel.UserCustomerId;
        var table = document.getElementById("bidHistoryTable");
        var row = table.insertRow();

        var cell1 = row.insertCell();
        cell1.textContent = "#";

        var cell2 = row.insertCell();
        cell2.textContent = HUFFormatter.format(tableRow.BidPrice);

        if (myUserId != thPageViewModel.CurrentProductToAuction.winnerCustomerId) {
            var cell3 = row.insertCell();
            cell3.textContent = "Online";
        }
        else {
            var cell3 = row.insertCell();
            cell3.textContent = "Offline";
        }

    }

    function reloadOnUpdate() {
	    location.reload();
    }

    function updateOnBid(data) {
        console.log(data);
        let auctionDto = data.auctionDto;
        let productToAuction = auctionDto.productToAuctionDtos[0];

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

        var liveScreenLicitStep = document.getElementById("liveScreenLicitStep");
        if(liveScreenLicitStep) {
            liveScreenLicitStep.textContent = data.nextStepAmount;
        }
        var liveScreenCurrentPrice = document.getElementById("liveScreenCurrentPrice");
        if (liveScreenCurrentPrice) {
            liveScreenCurrentPrice.textContent= HUFFormatter.format(productToAuction.currentPrice);
        }
        if (myUserId != productToAuction.winnerCustomerId) {
            //ding
            console.log(myUserId + ", " + productToAuction.winnerCustomerId);
            var audio = new Audio('../../Plugins/Misc.AuctionPlugin/Content/ding.mp3');
                audio.play();
        }
        console.log(productToAuction);
        var table = document.getElementById("bidHistoryTable");
        var row = table.insertRow(1);

        var cell1 = row.insertCell();
        cell1.textContent = "#";

        var cell2 = row.insertCell();
        cell2.textContent = HUFFormatter.format(productToAuction.currentPrice);
        if (myUserId != productToAuction.winnerCustomerId) {
            var cell3 = row.insertCell();
            cell3.textContent = "Online";
        }
        else {
            var cell3 = row.insertCell();
            cell3.textContent = "Offline";
        }
        
    }

</script>