@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 = "_AdminLayout";
    //page title
    ViewBag.Title = T("Admin.Plugins.HomePageProduct").Text;
}

<div class="content-header clearfix">
    <div class="pull-right">
        <a href="../AuctionPluginAdmin/GetAuctionViewModel" class="btn bg-blue">
            <i class="fa fa-floppy-o"></i>
            Add
        </a>
    </div>
</div>

<div class="content">
    <div class="form-horizontal">
        <div class="panel-group">
            <div class="panel panel-default">
                <div class="panel-body">

                    @await Html.PartialAsync("Table", new DataTablesModel
               {
                   Name = "announcement-grid",
                   UrlRead = new DataUrl("GetAuctionList", "AuctionPluginAdmin"),
                   Paging = false,
                   ColumnCollection = new List<ColumnProperty>
                    {
                        new ColumnProperty(nameof(Auction.AuctionName))
                        {
                        Title = "Name",
                        Width = "300"
                        },
                        new ColumnProperty(nameof(Auction.StartDateUtc))
                        {
                        Title = "Starts",
                        Width = "300"
                        },
                    new ColumnProperty(nameof(Auction.EndDateUtc))
                    {
                    Title = "Ends",
                    Width = "300"
                    },
                        new ColumnProperty(nameof(Auction.Closed))
                        {
                        Title = "Closed",
                        Width = "100"
                        },
                        new ColumnProperty(nameof(Auction.Id)) // Assuming Auction.Id exists
                        {
                        Title = "Actions",
                        Render = new RenderCustom("renderEditButton"),
                        Width = "100"
                        }
                    }
               })



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


<div class="modal fade" id="editAuctionModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Auction</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <form id="editAuctionForm">
                    <input type="hidden" name="Id" />
                    <div class="form-group">
                        <label>Name</label>
                        <input name="AuctionName" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label>Category Id</label>
                        <input name="CategoryId" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label>Starts</label>
                        <input name="StartDateUtc" type="datetime-local" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label>Ends</label>
                        <input name="EndDateUtc" type="datetime-local" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label>Closed</label>
                        <input name="Closed" type="checkbox" />
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="saveAuction()">Save</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script>
    function renderEditButton(data, type, row) {
        return `<button class="btn btn-primary btn-sm" onclick="openEditModal(${data})">
                        <i class="fa fa-edit"></i> Edit
                    </button>`;
    }

    function openEditModal(auctionId) {
        // Fetch auction data via AJAX
        $.get(`/Admin/AuctionPluginAdmin/GetAuctionById/${auctionId}`, function (data) {
            $('#editAuctionModal input[name="Id"]').val(data.id);
            $('#editAuctionModal input[name="CategoryId"]').val(data.categoryId);
            $('#editAuctionModal input[name="AuctionName"]').val(data.auctionName);
            $('#editAuctionModal input[name="StartDateUtc"]').val(data.startDateUtc);
            $('#editAuctionModal input[name="EndDateUtc"]').val(data.endDateUtc);
            $('#editAuctionModal input[name="Closed"]').prop('checked', data.closed);

            $('#editAuctionModal').modal('show');
        });
    }
</script>

<script>
    function saveAuction() {
        var formData = $('#editAuctionForm').serialize();
        console.log(formData);
        $.post('/Admin/AuctionPluginAdmin/SaveAuction', formData, function () {
            location.reload(); // Reload the grid after saving
        });
    }
</script>