let daten = [];

async function load() {
    const res = await fetch("fragen.json");
    daten = await res.json();
    render();
}

function render() {
    const container = document.getElementById("fragen");
    container.innerHTML = "";

    daten.forEach((f, i) => {
        container.innerHTML += `
            <div class="box">
                <strong>Frage ${i+1}</strong>
                <input value="${f.frage}" onchange="edit(${i}, 'frage', this.value)">
                <input value="${f.antwort}" onchange="edit(${i}, 'antwort', this.value)">
                <input value="${f.tipp}" onchange="edit(${i}, 'tipp', this.value)">
                <button onclick="removeFrage(${i})">Löschen</button>
            </div>
        `;
    });
}

function edit(i, field, value) {
    daten[i][field] = value;
    save();
}

function addFrage() {
    daten.push({
        frage: document.getElementById("newFrage").value,
        antwort: document.getElementById("newAntwort").value,
        tipp: document.getElementById("newTipp").value
    });
    save();
}

function removeFrage(i) {
    daten.splice(i, 1);
    save();
}

async function save() {
    await fetch("save.php", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(daten)
    });
    load();
}

load();