nvj-turnierplaner2/script.js

const STORAGE_KEY = 'turnierplaner_data';

// Daten laden beim Start
document.addEventListener('DOMContentLoaded', () => {
    loadData();
});

function addTeam(league) {
    const list = document.getElementById(`${league}-list`);
    
    // Leere-Nachricht entfernen wenn vorhanden
    const emptyMsg = list.querySelector('.empty-message');
    if (emptyMsg) {
        emptyMsg.remove();
    }

    const teamEntry = document.createElement('div');
    teamEntry.className = 'team-entry';
    teamEntry.innerHTML = `
        <div class="team-info">
            <input type="text" placeholder="Teamname" class="team-name">
            <input type="text" placeholder="Vereinsname" class="team-club">
            <input type="text" placeholder="Schlachtruf" class="team-motto">
        </div>
        <button class="delete-btn" onclick="deleteTeam(this)">Löschen</button>
    `;

    list.appendChild(teamEntry);
    updateTeamCount(league);
    saveData();
    
    // Focus auf das erste Input-Feld
    teamEntry.querySelector('.team-name').focus();
}

function deleteTeam(button) {
    const teamEntry = button.parentElement;
    const list = teamEntry.parentElement;
    
    teamEntry.remove();
    
    // Bestimme welche Liga
    const league = list.id.replace('-list', '');
    updateTeamCount(league);
    saveData();

    // Zeige Leere-Nachricht wenn keine Teams mehr
    if (list.children.length === 0) {
        const emptyMsg = document.createElement('div');
        emptyMsg.className = 'empty-message';
        emptyMsg.textContent = 'Keine Teams hinzugefügt. Klicke auf + um zu beginnen!';
        list.appendChild(emptyMsg);
    }
}

function saveData() {
    const data = {
        fieldCount: document.getElementById('fieldCount').value,
        bundesliga: getTeamsFromList('bundesliga'),
        champions: getTeamsFromList('champions')
    };
    localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
}

function getTeamsFromList(league) {
    const list = document.getElementById(`${league}-list`);
    const teams = [];
    list.querySelectorAll('.team-entry').forEach(entry => {
        teams.push({
            name: entry.querySelector('.team-name').value,
            club: entry.querySelector('.team-club').value,
            motto: entry.querySelector('.team-motto').value
        });
    });
    return teams;
}

function loadData() {
    const stored = localStorage.getItem(STORAGE_KEY);
    if (!stored) return;

    const data = JSON.parse(stored);
    
    // Lade Feldanzahl
    document.getElementById('fieldCount').value = data.fieldCount || 1;

    // Lade Teams
    loadTeamsToList('bundesliga', data.bundesliga || []);
    loadTeamsToList('champions', data.champions || []);

    // Event listener für Auto-Save
    document.getElementById('fieldCount').addEventListener('change', saveData);
    document.addEventListener('input', (e) => {
        if (e.target.classList.contains('team-name') || 
            e.target.classList.contains('team-club') || 
            e.target.classList.contains('team-motto')) {
            saveData();
        }
    });
    
    // Update Team-Anzahl
    updateTeamCount('bundesliga');
    updateTeamCount('champions');
}

function loadTeamsToList(league, teams) {
    const list = document.getElementById(`${league}-list`);
    list.innerHTML = '';

    if (teams.length === 0) {
        const emptyMsg = document.createElement('div');
        emptyMsg.className = 'empty-message';
        emptyMsg.textContent = 'Keine Teams hinzugefügt. Klicke auf + um zu beginnen!';
        list.appendChild(emptyMsg);
        return;
    }

    teams.forEach(team => {
        const teamEntry = document.createElement('div');
        teamEntry.className = 'team-entry';
        teamEntry.innerHTML = `
            <div class="team-info">
                <input type="text" placeholder="Teamname" class="team-name" value="${escapeHtml(team.name)}">
                <input type="text" placeholder="Vereinsname" class="team-club" value="${escapeHtml(team.club)}">
                <input type="text" placeholder="Schlachtruf" class="team-motto" value="${escapeHtml(team.motto)}">
            </div>
            <button class="delete-btn" onclick="deleteTeam(this)">Löschen</button>
        `;
        list.appendChild(teamEntry);
    });

    // Event listener für Auto-Save
    document.addEventListener('input', (e) => {
        if (e.target.classList.contains('team-name') || 
            e.target.classList.contains('team-club') || 
            e.target.classList.contains('team-motto')) {
            saveData();
        }
    });
    
    // Update Team-Anzahl
    updateTeamCount(league);
}

function updateTeamCount(league) {
    const list = document.getElementById(`${league}-list`);
    const countElement = document.getElementById(`${league}-count`);
    const teamCount = list.querySelectorAll('.team-entry').length;
    const teamText = teamCount === 1 ? 'Team' : 'Teams';
    countElement.textContent = `${teamCount} ${teamText}`;
}

function exportData() {
    const data = {
        fieldCount: document.getElementById('fieldCount').value,
        bundesliga: getTeamsFromList('bundesliga'),
        champions: getTeamsFromList('champions')
    };

    const outputDiv = document.getElementById('export-output');
    outputDiv.textContent = JSON.stringify(data, null, 2);
    outputDiv.style.display = 'block';

    // Download als JSON-Datei
    const jsonString = JSON.stringify(data, null, 2);
    const blob = new Blob([jsonString], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `turnierplaner_${new Date().toISOString().split('T')[0]}.json`;
    a.click();
    URL.revokeObjectURL(url);
}

function importData() {
    document.getElementById('import-file').click();
}

function handleFileImport(event) {
    const file = event.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = (e) => {
        try {
            const data = JSON.parse(e.target.result);
            
            document.getElementById('fieldCount').value = data.fieldCount || 1;
            loadTeamsToList('bundesliga', data.bundesliga || []);
            loadTeamsToList('champions', data.champions || []);
            
            saveData();
            alert('✅ Daten erfolgreich importiert!');
        } catch (error) {
            alert('❌ Fehler beim Importieren der Datei: ' + error.message);
        }
    };
    reader.readAsText(file);
    
    // Reset file input
    event.target.value = '';
}

function escapeHtml(text) {
    const map = {
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#039;'
    };
    return text.replace(/[&<>"']/g, m => map[m]);
}

function navigateToPlanning() {
    const data = {
        fieldCount: document.getElementById('fieldCount').value,
        bundesliga: getTeamsFromList('bundesliga'),
        champions: getTeamsFromList('champions')
    };
    
    // Speichere in localStorage falls noch nicht gespeichert
    localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
    
    // Navigiere zur Planungsseite
    window.location.href = 'planning.html';
}