// Add item to inventory list with delete button
function addItem(outList, newItem) {
    const itemInput = document.getElementById(newItem);
    const itemValue = itemInput.value.trim();
    if (itemValue) {
        const listItem = document.createElement("li");

        // Add item text
        listItem.textContent = itemValue;

        // Add Counter
        const count = document.createElement("input");
        count.setAttribute('type', 'number');
        count.setAttribute('value', 1);
        // Append Counter to list item
        listItem.appendChild(count);

        // Create delete button
        const deleteButton = document.createElement("button");
        deleteButton.textContent = "Remove";
        deleteButton.classList.add("delete-button");

        // Attach event to delete button
        deleteButton.onclick = function() {
            listItem.remove();
        };

        // Append delete button to list item
        listItem.appendChild(deleteButton);

        // Append list item to inventory list
        document.getElementById(outList).appendChild(listItem);
        
        // Clear input field
        itemInput.value = "";
    }
}

// Save character data with inventory items
function saveCharacter() {
    const characterData = {
        playerName: document.getElementById("PlayerName").value,
        hunterName: document.getElementById("HunterName").value,
        campaignName: document.getElementById("CampaignName").value,
        palicoName: document.getElementById("PalicoName").value,
        materials: Array.from(document.getElementById("MaterialList").children).map(function(item) {
            return { name: item.firstChild.textContent, count: item.lastChild.value}
        }),
        parts: Array.from(document.getElementById("PartList").children).map(function(item) {
            return { name: item.firstChild.textContent, count: item.lastChild.value}
        }),
        items: Array.from(document.getElementById("inventoryList").children).map(function(item) {
            return { name: item.firstChild.textContent, count: item.lastChild.value}
        }),
        potions: document.getElementById("potions").value,
        day: document.getElementById("CampaignDay").value
    };
    
    localStorage.setItem("characterData", JSON.stringify(characterData));
    document.getElementById("statusMessage").textContent = "Character saved!";
}

// Load character data and populate inventory with remove buttons
window.onload = function() {
    const savedData = localStorage.getItem("characterData");
    if (savedData) {
        const characterData = JSON.parse(savedData);
        document.getElementById("PlayerName").value = characterData.playerName;
        document.getElementById("HunterName").value = characterData.hunterName;
        document.getElementById("CampaignName").value = characterData.campaignName;
        document.getElementById("PalicoName").value = characterData.palicoName;
        document.getElementById("MaterialList").value = characterData.materials;
        document.getElementById("inventoryList").value = characterData.parts;
        document.getElementById("inventoryList").value = characterData.items;
        
        characterData.materials.forEach(item => {printInventorys(item,"MaterialList","newMat")});
        characterData.parts.forEach(item => {printInventorys(item,"PartList","newPart")});
        characterData.items.forEach(item => {printInventorys(item,"inventoryList","newItem")});

        document.getElementById("potions").value = characterData.potions;
        document.getElementById("CampaignDays").value = characterData.day;
    }
};

function printInventorys(item,list) {
            const listItem = document.createElement("li");
            listItem.textContent = item.name;

            // Create and append count
            const count = document.createElement("input");
            count.setAttribute('type', 'number');
            count.setAttribute('value', item.count);
            // Append Counter to list item
            listItem.appendChild(count);

            // Create and append delete button
            const deleteButton = document.createElement("button");
            deleteButton.textContent = "Remove";
            deleteButton.classList.add("delete-button");
            deleteButton.onclick = function() {
                listItem.remove();
            };
            listItem.appendChild(deleteButton);

            document.getElementById(list).appendChild(listItem);
}