SGD v008a1 test js FILTER only

document.addEventListener('DOMContentLoaded', () => {
    const gameItems = document.querySelectorAll('.game-item');
    const form = document.getElementById('game-form');
    const fields = <?php echo json_encode(array_keys($fieldDefinitions)); ?>;
    const gameImage = document.getElementById('game-screenshot');
    const gameImageContainer = document.getElementById('game-image');
    const filterInput = document.getElementById('filter-input');
    const filterSelect = document.getElementById('filter-select');
    const toggleRightPanelButton = document.getElementById('toggle-right-panel');
    const rightPanel = document.getElementById('right-panel');
    const games = <?php echo json_encode($games); ?>; // Make games available to JavaScript

    // Attach click handlers to game items
    gameItems.forEach(item => {
        item.addEventListener('click', () => {
            // Remove active class from all items
            document.querySelectorAll('.game-item').forEach(i => i.classList.remove('active'));
            item.classList.add('active');

            // Load game data into form
            const gameData = JSON.parse(item.dataset.game);
            fields.forEach(field => {
                const input = form.querySelector(`[name="${field}"]`);
                if (input) input.value = gameData[field];
            });
            form.querySelector('[name="lineIndex"]').value = item.dataset.index; // Store the index for the form submission

            // Load and display the game image
            const pcName = gameData['PC-Name']; // Get the PC-Name from the game data
            const imagePath = `SCRSHOT/${pcName}.gif`; // Create the image path

            // Set the image source
            gameImage.src = imagePath;

            // Check if the image exists, then display it
            const img = new Image();
            img.onload = () => {
                gameImage.style.display = 'block'; // Show the image if it loads
                gameImage.src = imagePath; // Set the image source
            };
            img.onerror = () => {
                gameImage.style.display = 'none'; // Hide image if it doesn't exist
            };
            img.src = imagePath; // Trigger the image load
            updateGameDirectoryDisplay();//console.log("updateGameDirectoryDisplay();");
        });
    });

    // Handle form submission
    form.addEventListener('submit', (e) => {
        e.preventDefault();
        const formData = new FormData(form);

        fetch('', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === 'success') {
                // Update the left panel with the updated game
                const updatedGame = data.updatedGame;
                const lineIndex = data.lineIndex;
                const updatedGameItem = document.querySelector(`.game-item[data-index="${lineIndex}"]`);
                if (updatedGameItem) {
                    updatedGameItem.dataset.game = JSON.stringify(updatedGame);
                    updatedGameItem.querySelector('strong').textContent = updatedGame.Name;
                }

                alert('Game updated successfully!');
            }
        });
    });

    // Filter game list
    filterInput.addEventListener('input', filterGames);
    filterSelect.addEventListener('change', filterGames);

function filterGames() {
    const filterValue = filterInput.value.toLowerCase();
    const filterField = filterSelect.value;

    const filteredGames = games.filter(game => {
        if (filterField === 'Name') {
            return game.Name.toLowerCase().includes(filterValue);
        } else if (filterField === 'Type') {
            return game.Type.toLowerCase().includes(filterValue);
        } else if (filterField === 'Year') {
            return game.Year.includes(filterValue);
        } else if (filterField === 'FirstLetter') {
            return game.Name.toLowerCase().startsWith(filterValue);
        } else {
            return true; // Show all games if no filter is selected
        }
    });

    // Update the game list in the left panel
    const gameList = document.getElementById('game-list');
    gameList.innerHTML = '';

    filteredGames.forEach((game, index) => {
        const gameItem = document.createElement('tr');
        gameItem.classList.add('game-item');
        gameItem.dataset.game = JSON.stringify(game);
        gameItem.dataset.index = index;
        gameItem.innerHTML = `
            <td><strong>${game.Name}</strong></td>
            <td>${game.Type}</td>
            <td>${game.Year}</td>
            <td>${game['PC-Name']}</td>
            <td>${game.Author}</td>
        `;
        gameList.appendChild(gameItem);

        // Attach click handler to the newly created item
        gameItem.addEventListener('click', () => {
            // Remove active class from all items
            document.querySelectorAll('.game-item').forEach(i => i.classList.remove('active'));
            gameItem.classList.add('active');

            // Load game data into form
            const gameData = JSON.parse(gameItem.dataset.game);
            fields.forEach(field => {
                const input = form.querySelector(`[name="${field}"]`);
                if (input) input.value = gameData[field];
            });
            form.querySelector('[name="lineIndex"]').value = gameItem.dataset.index; // Store the index for the form submission

            // Load and display the game image
            const pcName = gameData['PC-Name']; // Get the PC-Name from the game data
            const imagePath = `SCRSHOT/${pcName}.gif`; // Create the image path

            // Set the image source
            gameImage.src = imagePath;

            // Check if the image exists, then display it
            const img = new Image();
            img.onload = () => {
                gameImage.style.display = 'block'; // Show the image if it loads
                gameImage.src = imagePath; // Set the image source
            };
            img.onerror = () => {
                gameImage.style.display = 'none'; // Hide image if it doesn't exist
            };
            img.src = imagePath; // Trigger the image load

            // Call to update the game directory display based on the PathIndex
            updateGameDirectoryDisplay();
        });
    });
}

});