Untitled

<script type="text/javascript">
    var isLoading = false;
    var currentPage = 0;
    var pageSize = 10; // Number of items to load per request

    $(document).ready(function () {
        $('.multiselect').multiselect({
            enableFiltering: true,
            enableCaseInsensitiveFiltering: true
        });
        $(".select-search").select2();
        $('.select-no-search').select2({
            minimumResultsForSearch: -1
        });

        BindTable();

        // Bind scroll event to trigger lazy loading
        $(window).on('scroll', function () {
            if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
                if (!isLoading) {
                    currentPage++;
                    BindTable();
                }
            }
        });
    });

    function BindTable() {
        isLoading = true;

        $.ajax({
            url: '@Url.Action("DesignLibraryListDataTable", "Quotation")',
            type: 'POST',
            data: {
                DesignName: $('#DesignName').val(),
                DesignShortName: $('#DesignShortName').val(),
                DesignGroupID: $("#DesignGroupID option:selected").val(),
                DesignSeriesID: $('#DesignSeriesID option:selected').val(),
                draw: 1,
                start: currentPage * pageSize,
                length: pageSize,
                order: [{ column: 0, dir: "asc" }]
            },
            success: function (response) {
                response.data.forEach(function (item) {
                    var img = "../../../assets/images/glass_window_default.png";
                    var imagePath = item.lstDesignImages.length > 0 ? item.lstDesignImages[0].ImagePath : img;
                    var cardHtml = `
                        <div class="col-xl-3 col-sm-6 mb-4">
                            <div class="card" style="border-radius:10px">
                                <div class="" style="padding:10px; padding-top:0px; padding-bottom:0px">
                                    <div class="card-img-actions">
                                        <img src="${imagePath}" class="card-img" alt="">
                                    </div>
                                </div>
                                <div class="text-right" style="padding-left:10px;padding-bottom:10px">
                                    <div class="mb-2">
                                        <h6 class="mb-0">
                                            <a href="#" class="text-body mb-0"><strong>${item.DesignName}</strong></a>
                                        </h6>
                                        <span class="text-muted">Short Name:${item.DesignShortName}</span>
                                        <div class="d-flex justify-content-between">
                                            <p class="mb-0">
                                                <small>Width: ${item.WMinMax}</small><br>
                                                <small>Height: ${item.HMinMax}</small>
                                            </p>
                                            <p class="mb-0 text-end" style="padding-right:5px;">
                                                <small>Group: ${item.DesignGroupName}</small><br>
                                                <small>Series: ${item.DesignSeriesName}</small>
                                            </p>
                                        </div>
                                    </div>
                                    <button type="button" class="btn btn-primary btn-AddToQuotation" onclick="addToQuotation(${item.DesignID})">
                                        + Add to Quotation
                                    </button>
                                </div>
                            </div>
                        </div>`;
                    $('#ItemCardContainer').append(cardHtml);
                });

                isLoading = false;
            },
            error: function (xhr, status, error) {
                console.error("An error occurred while fetching the data: ", error);
                isLoading = false;
            }
        });
    }

    function addToQuotation(DesignID) {
        $.ajax({
            url: `/Quotation/DesignLibraryDetail?DesignID=` + DesignID + '&QuotationID=' + $('#QuotationID').val(),
            type: 'GET',
            success: function (result) {
                $('#innercontainer').html(result);
            },
            error: function (xhr, status, error) {
                console.error(`Error loading partial view: ${error}`);
            }
        });
    }
</script>