@model LiveScreenViewModel
@using Nop.Core.Infrastructure
@using Nop.Web.Framework

@{
    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 id="auctionProductLiveScreenBox" class="row py-3">
            <!-- Item Image -->
            <div class="col-lg-4 col-md-6 mb-4">
                <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">
                            <table id="bidHistoryTable" class="table table-striped bg-transparent">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Bidder</th>
                                        <th>Bid Amount</th>
                                        <th>Date</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Dynamic Data Populated by DataTable -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Item Details -->
            <div class="col-lg-8 col-md-6" style="height: 100vh;">
                <div class="card border-0 bg-transparent h-100">
                    <div class="card-body border-0">
                        <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>
                        <h3> Item no.: @Model.CurrentProductToAuction.SortIndex </h3>
                        <!-- Item Information -->
                        <ul class="list-group mb-3 border-0">
                            <li class="bg-transparent border-0 list-group-item d-flex justify-content-between align-items-center">
                                <span>Base price</span>
                                <span>@(String.Format("{0:c}", Model.BasePrice))</span>
                            </li>
                            <li class="bg-transparent border-0 list-group-item d-flex justify-content-between align-items-center">
                                <span>Actual licit step</span>
                                <span>@(String.Format("{0:c}", Model.LicitStep))</span>
                            </li>
                            <li class="bg-transparent border-0 list-group-item d-flex justify-content-between align-items-center">
                                @await Html.PartialAsync("../../../Views/Product/_ProductSpecifications.cshtml", Model.ActiveProductDetails.ProductSpecificationModel)
                                @*  @{

                        var dataDictAttributes = new ViewDataDictionary(ViewData);
                        dataDictAttributes.TemplateInfo.HtmlFieldPrefix = $"attributes_{Model.ProductDetails.Id}";
                        @await Html.PartialAsync("../../../Views/Product/_ProductAttributes.cshtml", Model.ProductDetails, dataDictAttributes)
                        }
                        *@
                            </li>
                            @* <li class="list-group-item d-flex justify-content-between align-items-center">
                    <span>Material</span>
                    <span>Oil on Canvas</span>
                    </li> *@
                            <li class="bg-transparent border-0 list-group-item">
                                <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 border-0 d-flex justify-content-between align-items-center ">
                        <span>Current state price</span>
                        <h3>@(String.Format("{0:c}", Model.CurrentPrice))</h3>

                    </div>
                </div>
            </div>
        </div>
    }
    else
    {
        <div class="row mt-4">
            <!-- Bid History Table -->
            <div class="col-12">
            <h1>@Model.AuctionDto.AuctionName</h1>
            </div>
        </div>

    }
}




<!-- Initialize DataTable -->
<script>
    $(document).ready(function () {
        $('#bidHistoryTable').DataTable({
            "pageLength": 10,
            "ordering": true,
            "searching": true,
            "info": true,
            "lengthChange": false,
            "columns": [
                { "data": "#" },
                { "data": "Bidder" },
                { "data": "Bid Amount" },
                { "data": "Date" }
            ]
        });
    });
</script>