function shippingInstructsComponent(id) {
    $.ajax({
        url: '/POMgmt/GetShippingInstructions',
        type: 'GET',
        data: { id: id },
        success: function (response) {
            $('#shippingInstructionsContainer').html(response); // Inject the component's HTML into the modal
        },
        error: function (xhr, status, error) {
            console.error("Error loading component:", error);
        }
    });
}
function poTableComponent(id, loader) {
    $.ajax({
        url: '/POMgmt/GetPOTable',
        type: 'GET',
        data: { id: id },
        success: function (response) {
            $('#POTableContainer').html(response);
            poInitializeDatatable(loader);
        },
        error: function (xhr, status, error) {
            console.error("Error loading component:", error);
        }
    });
}
async function customFormPOElemComponent(id) {
    document.getElementById("poNo").readOnly = true;
    document.getElementById('customPOHeading').innerHTML = 'Custom P.O. Creation';

    $('#poTypeId').val(id);

    $("#supplierName").off('keyup').on('keyup', function () {
        populateSupplier();
    });

    if (!id) {
        console.warn("No PO Type selected.");
        return;
    }

    // 1. Load the custom form container FIRST
    await new Promise(function (resolve, reject) {
        $.ajax({
            url: '/POMgmt/GetCustomFormPOElem',
            type: 'GET',
            data: { id: id },
            success: function (response) {
                $('#CustomFormPOElemContainer').html(response);
                $("#C-paymentTerms").off('keyup').on('keyup', function () {
                    populateTerms();
                });
                resolve();
            },
            error: function (xhr, status, error) {
                console.error("Error loading component:", error);
                reject(error);
            }
        });
    });

    // 2. NOW the hidden inputs exist in DOM — safe to populate
    await populatePOElem(id);

    // 3. NOW read from those inputs
    populateIncoterms();
    getPONoType(id);
    getPOType(id);

    isUpdate = false;
}
function poReportComponent(id) {
    return $.ajax({
        url: '/POMgmt/GetPOReportTable',
        type: 'GET',
        data: { id: id },
        success: function (response) {
            $('#POTableContainer').html(response);
        },
        error: function (xhr, status, error) {
            console.error("Error loading component:", error);
        }
    });
}