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

        <div class="row">
            <!-- Item Image -->
            <div class="col-lg-5 col-md-6 mb-4">
                <div class="card shadow-sm">
                    <img src="@Model.ProductDetails.DefaultPictureModel.FullSizeImageUrl" class="card-img-top img-fluid" alt="Auction Item Image">
                </div>
            </div>
            <!-- Item Details -->
            <div class="col-lg-7 col-md-6">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <h3 class="card-title">Auction Item Title</h3>
                        <p class="text-muted mb-3">Created by: <span class="font-weight-bold">Creator Name</span></p>

                        <!-- Item Information -->
                        <ul class="list-group mb-3">
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <span>Size</span>
                                <span>10 x 12 inches</span>
                            </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="list-group-item">
                                <span class="font-weight-bold">Description:</span>
                                <p class="mb-0 mt-2 text-muted">
                                    A beautiful depiction of a serene landscape, perfect for any art lover or collector.
                                </p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-4">
            <!-- Bid History Table -->
            <div class="col-12">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <h5 class="card-title mb-3">Bid History</h5>
                        <div class="table-responsive">
                            <table id="bidHistoryTable" class="table table-striped table-bordered">
                                <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>
        </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>