@model ProductBidBoxViewModel
@inject IJsonHelper JsonHelper;

@* @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(myObj) as String) *@
<div class="bg-dark p-3">
    <h3>Auction Public View Component</h3>
    <p>@T("Plugins.Misc.AuctionPlugin.BidBox.Field.Label"):</p>
    <p>DEBUG DATA:</p>
    <p>@Model.ProductId</p>
    <p>@Model.CustomerId</p>
    <p>@Model.BasePrice</p>
    <div class="d-flex justify-content-between mb-3">
        <div>
            <strong>Current Price:</strong>
            <span class="value">@Model.CurrentPrice</span>
        </div>
        <div>
            <strong>Bid Step:</strong>
            <span class="value">@Model.LicitStep</span>
        </div>
    </div>

    <div class="d-flex align-items-center mb-3">
        <label for="bidPrice" class="me-2">Your Bid Price:</label>
        <input type="number" id="bidPrice" class="form-control w-25" value="@Model.BidPrice" min="@(Model.CurrentPrice + Model.LicitStep)">
    </div>

    <button id="bidButton" class="btn btn-success">
        Place Bid
    </button>

    <button id="testButton" class="btn btn-success">
        TestButton
    </button>

    <div id="bidFeedback" class="mt-3"></div>
</div>

<script>
    $(document).ready(function () {
        
        var pageViewModel = @Html.Raw(Json.Serialize(Model));
        console.log(pageViewModel);                
        console.log(pageViewModel.WidgetZone);

        $('#bidButton').click(function () {
            const bidPrice = $('#bidPrice').val();

            // Validate bid price
            if (!bidPrice || parseInt(bidPrice) < @Model.CurrentPrice + @Model.LicitStep) {
                $('#bidFeedback').text('Bid price must be at least the current price plus the licit step.')
                                 .addClass('text-danger');
                return;
            }

            // AJAX POST to send the bid
            $.ajax({
                url: '/Auction/PlaceBid', // Ensure this endpoint exists in your controller
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    bidPrice: bidPrice,
                    customerId: dataObject.CustomerId,
                    productId: dataObject.ProductId
                }),
                success: function (response) {
                    $('#bidFeedback').text(response.message).removeClass('text-danger').addClass('text-success');
                },
                error: function (xhr) {
                    $('#bidFeedback').text('Failed to place bid: ' + xhr.responseText)
                                     .addClass('text-danger');
                }
            });
        });
        $('#testButton').click(function () 
        {          
            $.ajax({
                url: '/Auction/RefreshAuctionWidget', // Controller endpoint
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    WidgetZone: pageViewModel.WidgetZone,
                    ProductId: pageViewModel.ProductId
                }),
                success: function (response) {
                    //$('#auction-widget').html(response); // Update the DOM element
                    console.log("Auction widget refreshed!");
                },
                error: function (error) {
                    console.error("Error refreshing auction widget:", error);
                }
            });
        });

    });
</script>