async function setupProjectCodeAutocomplete() {
    const input = document.getElementById('projectCode');
    let debounceTimer;

    input.addEventListener('input', function (e) {
        clearTimeout(debounceTimer);
        const searchTerm = e.target.value;

        if (searchTerm.length < 2) return;

        debounceTimer = setTimeout(async () => {
            try {
                // Replace with your actual API endpoint
                const response = await fetch(`/api/projects/search?term=${encodeURIComponent(searchTerm)}`);
                const projects = await response.json();

                const datalist = document.getElementById('projectCodeList');
                datalist.innerHTML = '';

                projects.forEach(project => {
                    const option = document.createElement('option');
                    option.value = project.code;
                    option.textContent = `${project.code} - ${project.name}`;
                    datalist.appendChild(option);
                });
            } catch (error) {
                console.error('Error fetching project codes:', error);
            }
        }, 300);
    });
}
function populateItemCategSelect() {
    $.ajax({
        url: "/ItemMgmt/GetItemCateg",
        success: function (response) {
            if (response && response.success && Array.isArray(response.data)) {
                var $itemCategorySelect = $('#itemCategorySelect');
                $itemCategorySelect.empty();
                response.data.forEach(function (item) {
                    var option = $('<option></option>')
                        .attr('value', item.itemCategoryId)
                        .text(item.itemCategoryName);
                    $itemCategorySelect.append(option);
                });

                if (response.data.length > 0) {
                    var firstItem = response.data[0];
                    $itemCategorySelect.val(firstItem.itemCategoryId);
                    $('#ItemCategory2Id').val(firstItem.itemCategoryId);
                }
            } else {
                console.error('Invalid data format received:', response);
            }
        },
        error: function (error) {
            console.error('Error fetching item categories:', error);
        }
    });
    $('#itemCategorySelect').on('change', function () {
        var selectedCategoryId = $(this).val();
        $('#ItemCategory2Id').val(selectedCategoryId);
    });
}
function populateItemCateg() {
    $.ajax({
        url: "/ItemMgmt/GetItemCateg",
        success: function (data) {
            if (data && data.success && Array.isArray(data.data)) {
                var categs = data.data;
                $('#ItemCategory').empty();

                $('#ItemCategory').append($('<option>', {
                    value: '',
                    text: 'Please select a category',
                    disabled: true,
                    selected: true
                }));

                categs.forEach(function (item) {
                    $('#ItemCategory').append($('<option>', {
                        value: item.itemCategoryId,
                        text: item.itemCategoryName
                    }));
                });
                $('#ItemCategoryId').val('');
            } else {
                console.error('Invalid data format received:', data);
            }
        },
        error: function (error) {
            console.error('Error fetching categories:', error);
        }
    });
}
function populateItemColor() {
    $("#itemColorName").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/ItemMgmt/GetItemColor",
                data: { query: request.term },
                success: function (result) {
                    if (result && result.success && Array.isArray(result.data)) {

                        var formattedData = result.data.map(item => ({
                            label: item.label || '', // Use an empty string if undefined
                            value: item.value !== undefined && item.value !== null ? item.value.toString() : ''
                        }));

                        response(formattedData);
                    } else {
                        console.error('Invalid data format received:', result);
                        response([]); 
                    }
                }
            });
        },
        minLength: 2,
        select: function (event, ui) {
            $('#itemColorName').val(ui.item.label);
            $('#itemColorId').val(ui.item.value);
            return false;
        },
        focus: function (event, ui) {
            event.preventDefault();
        },
        messages: {
            noResults: '',
            results: function (count) {
                return count + (count > 1 ? ' results' : ' result');
            }
        }
    });
    $('#itemColorId').on('change', function () {
        var itemColorId = $(this).val();
        $('#itemColorId').val(itemColorId);
    });
}
function populateItemLocalization() {
    $("#itemLocalName").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/ItemMgmt/GetItemLocalization",
                data: { query: request.term },
                success: function (result) {
                    if (result && result.success && Array.isArray(result.data)) {

                        var formattedData = result.data.map(item => ({
                            label: item.label || '',
                            value: item.value !== undefined && item.value !== null ? item.value.toString() : ''
                        }));

                        response(formattedData);
                    } else {
                        console.error('Invalid data format received:', result);
                        response([]); 
                    }
                }
            });
        },
        minLength: 2,
        select: function (event, ui) {
            $('#itemLocalName').val(ui.item.label);
            $('#itemLocalId').val(ui.item.value);
            return false;
        },
        focus: function (event, ui) {
            event.preventDefault();
        },
        messages: {
            noResults: '',
            results: function (count) {
                return count + (count > 1 ? ' results' : ' result');
            }
        }
    });
}
function populateItemUOM() {
    $("#uomName").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/ItemMgmt/GetItemUOM",
                data: { query: request.term },
                success: function (result) {
                    if (result && result.success && Array.isArray(result.data)) {

                        var formattedData = result.data.map(item => ({
                            label: item.label || '', // Use an empty string if undefined
                            value: item.value !== undefined && item.value !== null ? item.value.toString() : ''
                        }));

                        response(formattedData);
                    } else {
                        console.error('Invalid data format received:', result);
                        response([]); // Return an empty array to clear the dropdown
                    }
                }
            });
        },
        minLength: 2,
        select: function (event, ui) {
            $('#uomName').val(ui.item.label);
            $('#uomId').val(ui.item.value);
            return false;
        },
        focus: function (event, ui) {
            event.preventDefault();
        },
        open: function () {
            // Get the autocomplete dropdown
            var dropdown = $(".ui-autocomplete");

            // Set the max height for the dropdown and enable vertical scrolling
            dropdown.css({
                "max-height": "200px", // Set a max height
                "overflow-y": "auto"    // Enable vertical scroll
            });
        },
        messages: {
            noResults: '',
            results: function (count) {
                return count + (count > 1 ? ' results' : ' result');
            }
        }
    });
}

function showHideLabelButtons(isNewOrUpdate) {
    if (isNewOrUpdate == 1) {
        let labelHeaderUpdate = document.getElementById('headerUpdate');
        let btnUpdateLayoutType = document.getElementById('btnUpdateItem');
        labelHeaderUpdate.style.display = 'none';
        btnUpdateLayoutType.style.display = 'none';

        let labelHeaderAddNew = document.getElementById('headerNew');
        let btnAddNewLayoutType = document.getElementById('btnaddNewItem');
        labelHeaderAddNew.style.display = 'block';
        btnAddNewLayoutType.style.display = 'block';
    } else {
        let labelHeaderAddNew = document.getElementById('headerNew');
        let btnAddNewLayoutType = document.getElementById('btnaddNewItem');
        labelHeaderAddNew.style.display = 'none';
        btnAddNewLayoutType.style.display = 'none';

        let labelHeaderUpdate = document.getElementById('headerUpdate');
        let btnUpdateLayoutType = document.getElementById('btnUpdateItem');
        labelHeaderUpdate.style.display = 'block';
        btnUpdateLayoutType.style.display = 'block';
    }
}
function showModalNewItem() {
    clearTextModal();
    let update = 1;
    showHideLabelButtons(update);
    inputItemPopulation();
    populateItemCateg();
    $('#addNewItem').modal('show');
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
    })
}
function viewItem(data) {
    loader = $('#overlay, #loader');
    imageHandler();
    let itemCategory = document.getElementById('itemCategoryName');
    itemCategory.style.display = 'block';

    let itemCategorySelect = document.getElementById('itemCategorySelect');
    itemCategorySelect.style.display = 'none';

    inputItemPopulation();
    ItemCodeId = data.itemCodeId;
    $.ajax({
        url: '/ItemMgmt/GetItemDetail',
        type: 'POST',
        data: { ItemCodeId },
        beforeSend: function () {
            loader.show();
        },
        complete: function () {
            loader.hide();
        },
        success: function (data) {
            if (data && data.data && data.data.length > 0) {
                var item = data.data[0];

                $('#itemCodeId').val(item.itemCodeId);
                $('#itemName').val(item.itemName);
                $('#itemDescription').val(item.itemDescription);
                $('#department').val(item.department);
                $('#itemCategoryName').val(item.itemCategoryName);
                $('#ItemCategory2Id').val(item.itemCategoryId);
                $('#statusName').val(item.statusName);
                $('#itemNo').val(item.itemNo);
                $('#itemTypeName').val(item.itemTypeName);
                $('#itemTypeId').val(item.itemTypeId);
                $('#itemClassId').val(item.itemClassId);
                $('#uomName').val(item.uomName);
                $('#uomId').val(item.uomId);
                $('#itemColorName').val(item.itemColorName);
                $('#itemColorId').val(item.itemColorId);
                $('#createdDate').val(item.createdDate);
                $('#itemLocalName').val(item.itemLocalName);
                $('#itemLocalId').val(item.itemLocalId);
                $('#itemQty').val(item.qty);
                $('#itemAttachId').val(item.itemAttachId);
                $('#isCommon').val(item.isCommon.toString());
                $('#requestTypeId').val(item.requestTypeId.toString());

                var itemPicturePath = item.itemAttachPath;
                if (!itemPicturePath || itemPicturePath === 'N/A' || itemPicturePath === 'None') {
                    $('#itemPictureImage').attr('src', '/Content/Common/empty.jpg'); 
                    isDefaultImage = true;
                } else {
                    var imageUrl = item.url + itemPicturePath; 
                    $('#itemPictureImage').attr('src', imageUrl);
                    isDefaultImage = false;
                }
                if (!item.isMDLD) {
                    document.getElementById("lli").disabled = true;
                    document.getElementById("lli").checked = true;
                    document.getElementById("mdld").checked = false;
                } else {
                    document.getElementById("lli").disabled = false;
                    document.getElementById("lli").checked = false;
                    document.getElementById("mdld").checked = true;
                }
                const checkBox = document.getElementById("mdld");
                const mdldLabel = document.getElementById("mdldLabel");
                if (!item.checkBox) {
                    checkBox.style.display = 'none';
                    mdldLabel.style.display = 'none';
                    document.getElementById("lli").disabled = true;
                } else {
                    checkBox.style.display = 'block';
                    mdldLabel.style.display = 'block';
                }
                const lli = document.getElementById("lli");
                const mdld = document.getElementById("mdld");

                // Mutual exclusivity
                lli.addEventListener('change', function () {
                    if (this.checked) {
                        mdld.checked = false;
                    }
                });

                mdld.addEventListener('change', function () {
                    if (this.checked) {
                        lli.checked = false;
                        document.getElementById("lli").disabled = false;
                    }
                });

                isFullFilled();
                // Display the modal
                $('#viewItemDetails').modal('show');
            } else {
                console.log('Data is null or undefined');
            }
        },
        error: function (xhr, error, thrown) {
            console.log('Authentication error:', error);
            console.log('Details:', thrown);
            window.location.href = '/Home/Logout';
        }
    });
}
function imageHandler() {
    var itemPictureImage = document.getElementById("itemPictureImage");
    var itemPictureImageInput = document.getElementById("itemPictureImageInput");

    itemPictureImage.src = "/Content/Common/empty.jpg";

    itemPictureImage.addEventListener("click", function () {
        itemPictureImageInput.click();
    });

    itemPictureImageInput.addEventListener("change", function () {
        var itemPicture = itemPictureImageInput.files[0];

        if (itemPicture) {
            var imageURL = URL.createObjectURL(itemPicture);
            itemPictureImage.src = imageURL;
        } else {
            console.log("No file selected, using default image");
            itemPictureImage.src = "/Content/Common/empty.jpg";
        }
    });
}
function inputItemPopulation() {
    $('#ItemCategory').on('change', function () {
        var selectedValue = $(this).val();
        $('#ItemCategoryId').val(selectedValue);
    });
    $('#itemCategoryName').on('change', function () {
        var selectedValue2 = $(this).val();
        $('#ItemCategory2Id').val(selectedValue2);
    });
    $('#itemCategoryName').on('click', function () {
        let itemCategory = document.getElementById('itemCategoryName');
        itemCategory.style.display = 'none';
        let itemCategorySelect = document.getElementById('itemCategorySelect');
        itemCategorySelect.style.display = 'block';
        populateItemCategSelect();
    });
    $("#itemColorName").on('keyup', function () {
        populateItemColor();
    });
    $("#uomName").on('keyup', function () {
        populateItemUOM();
    });
    $("#itemLocalName").on('keyup', function () {
        populateItemLocalization();
    });
    $('#departmentId').on('change', function () {
        var selectedValue = $(this).val();
        $('#departmentId').val(selectedValue);
    });
}
function showModal() {
    popltDeprtmntChargeTo();
    $('#addDateNeeded').modal('show');
    $('#addDateNeeded').css('z-index', 1060);
}
function popltDeprtmntChargeTo() {
    $.ajax({
        url: "/ItemMgmt/GetDepartment",
        success: function (data) {
            if (data && data.success && Array.isArray(data.data)) {
                var departments = data.data;

                $('#chargeTo').empty();
                departments.forEach(function (item) {
                    $('#chargeTo').append($('<option>', {
                        value: item.departmentId,
                        text: item.department
                    }));
                });
                if (departments.length > 0) {
                    $('#chargeTo').val(departments[0].department);
                    $('#departmentId').val(departments[0].departmentId);
                }
            } else {
                console.error('Invalid data format received:', data);
            }
        },
        error: function (error) {
            console.error('Error fetching batch numbers:', error);
        }
    });
}