document.addEventListener('DOMContentLoaded', function() {
    // Get references to the dropdown and rows
    const typeSelect = document.querySelector('select[name="type"]');
    const bruttoRow = document.getElementById('row-brutto');
    const amountRow = document.getElementById('row-amount');
    const kmRow = document.getElementById('row-km');
    const commentRow = document.getElementById('row-comment');

    // Function to show/hide rows based on selected type
    function updateVisibility() {
        const selectedType = typeSelect.value;

        // Hide or show rows based on selected type
        if (selectedType === 'Electric') {
            bruttoRow.style.display = 'none'; // Hide the Brutto row
            amountRow.style.display = 'block'; // Show the amount row
            kmRow.style.display = 'none'; // Hide km row if necessary
            commentRow.style.display = 'block'; // Show comment row
        } else if (selectedType === 'Gas') {
            bruttoRow.style.display = 'block'; // Show the Brutto row
            amountRow.style.display = 'none'; // Hide the amount row
            kmRow.style.display = 'block'; // Show km row
            commentRow.style.display = 'block'; // Show comment row
        } else {
            // Hide all rows if no valid type is selected
            bruttoRow.style.display = 'none';
            amountRow.style.display = 'none';
            kmRow.style.display = 'none';
            commentRow.style.display = 'none';
        }
    }

    // Add event listener for change on the dropdown
    typeSelect.addEventListener('change', updateVisibility);

    // Initial call to set visibility based on default selection
    updateVisibility();
});