<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kita-Platzvergabe Simulation</title>
    <style>
        .container {
            margin-bottom: 20px;
        }
        .button-container {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>Kita-Platzvergabe Prozess</h1>
    
    <!-- Eingabe- und Ausgabe-Bereich -->
    <div class="container">
        <label for="inputField">Eingabe:</label>
        <textarea id="inputField" rows="4" cols="50" readonly></textarea>
    </div>

    <div class="container">
        <label for="outputField">Ausgabe:</label>
        <textarea id="outputField" rows="4" cols="50" readonly></textarea>
    </div>

    <div class="container">
        <label for="statusField">Status:</label>
        <textarea id="statusField" rows="4" cols="50" readonly></textarea>
    </div>

    <!-- Weiter-Button -->
    <div class="button-container">
        <button id="nextStepBtn">Weiter</button>
    </div>

    <script>
        let step = 0;  // Track the current step

        // Eltern-Daten für die Simulation
        const elternDaten = {
            vaterID: "ELT123456",
            mutterID: "ELT654321",
            kindID: "KID789123",
            vaterName: "Max Muster",
            mutterName: "Maria Muster",
            adresse: "Beispielstraße 12, 12345 Musterstadt",
            kindName: "Emma Muster",
            geburtsdatumKind: "2019-05-16",
            geschwisterstatus: true,  // Ein Geschwisterkind in der Kita
            wohnortnahe: 1.2  // Entfernung zur Kita
        };

        // Funktion zum Update von Eingabe, Ausgabe und Status
        function updateFields(input, output, status) {
            document.getElementById("inputField").value = input;
            document.getElementById("outputField").value = output;
            document.getElementById("statusField").value = status;
        }

        // Schrittweise Ausführung des Prozesses
        function nextStep() {
            switch (step) {
                case 0:
                    // Schritt 1: Identitätsprüfung
                    updateFields(
                        JSON.stringify(elternDaten),
                        "Identität wird überprüft...",
                        "Schritt 1: Elternzugang über SSI"
                    );
                    step++;
                    break;
                case 1:
                    // Schritt 2: Einreichen der einmaligen Daten
                    updateFields(
                        JSON.stringify(elternDaten),
                        "Daten eingereicht.",
                        "Schritt 2: Daten eingereicht"
                    );
                    step++;
                    break;
                case 2:
                    // Schritt 3: Datenverifikation
                    setTimeout(() => {
                        updateFields(
                            JSON.stringify(elternDaten),
                            "Datenverifikation abgeschlossen",
                            "Schritt 3: Datenverifikation"
                        );
                        step++;
                    }, 1000); // Simuliert eine Verzögerung
                    break;
                case 3:
                    // Schritt 4: KI-basierte Priorisierung des Antrags
                    elternDaten.prioritaet = 8;  // Dummy-Priorität
                    updateFields(
                        JSON.stringify(elternDaten),
                        `Antrag priorisiert: Priorität = ${elternDaten.prioritaet}`,
                        "Schritt 4: KI-basierte Analyse und Priorisierung"
                    );
                    step++;
                    break;
                case 4:
                    // Schritt 5: Dokumentation in Blockchain
                    updateFields(
                        JSON.stringify(elternDaten),
                        "Daten in Blockchain dokumentiert.",
                        "Schritt 5: Dokumentation abgeschlossen"
                    );
                    step++;
                    break;
                case 5:
                    // Schritt 6: Bezahlung über Blockchain
                    updateFields(
                        JSON.stringify(elternDaten),
                        `Zahlung von ${elternDaten.vaterName} wird verarbeitet.`,
                        "Schritt 6: Bezahlung erforderlich"
                    );
                    step++;
                    break;
                case 6:
                    // Schritt 7: Platzzuweisung
                    updateFields(
                        JSON.stringify(elternDaten),
                        "Platz zugewiesen: Kita Sonnenschein, Zuweisungsdatum: 2024-12-15",
                        "Schritt 7: Automatisierte Platzzuweisung"
                    );
                    step++;
                    break;
                case 7:
                    // Schritt 8: Benachrichtigung
                    updateFields(
                        JSON.stringify(elternDaten),
                        "Benachrichtigung gesendet: Ihr Platz in der Kita Sonnenschein wurde zugewiesen.",
                        "Schritt 8: Benachrichtigung gesendet"
                    );
                    step++;
                    break;
                case 8:
                    // Schritt 9: Feedback und Optimierung
                    updateFields(
                        "Feedback: Schneller Prozess, mehr Transparenz gewünscht",
                        "Prozess optimiert.",
                        "Schritt 9: Feedback eingeholt"
                    );
                    step++;
                    break;
                case 9:
                    // End of simulation
                    updateFields(
                        "Prozess abgeschlossen.",
                        "Simulation abgeschlossen.",
                        "Simulation beendet"
                    );
                    document.getElementById("nextStepBtn").disabled = true;  // Disable the button
                    break;
            }
        }

        // Event-Listener für den Weiter-Button
        document.getElementById("nextStepBtn").addEventListener("click", nextStep);

        // Initialer Schritt starten
        nextStep();
    </script>
</body>
</html>