<!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 für alle Eingabefelder */
        .container {
            margin-bottom: 15px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        /* Layout für Labels und Textfelder */
        label {
            font-weight: bold;
            margin-bottom: 5px;
        }

        textarea {
            width: 100%;
            padding: 8px;
            margin-bottom: 10px;
            font-size: 14px;
            font-family: Arial, sans-serif;
            border: 1px solid #ccc;
            border-radius: 4px;
            resize: vertical;
        }

        .button-container {
            margin-top: 20px;
        }

        /* Hervorhebung des aktuellen Status */
        .highlight {
            font-weight: bold;
            color: green;
        }

        .status-field {
            white-space: pre-wrap;
        }
    </style>
</head>
<body>
    <h1>Kita-Platzvergabe Prozess</h1>
    
    <!-- Eingabe- und Ausgabe-Bereich -->
    <div class="container">
        <label for="vaterName">Vatername:</label>
        <textarea id="vaterName" rows="2" readonly></textarea>
    </div>

    <div class="container">
        <label for="mutterName">Muttername:</label>
        <textarea id="mutterName" rows="2" readonly></textarea>
    </div>

    <div class="container">
        <label for="kindName">Kindname:</label>
        <textarea id="kindName" rows="2" readonly></textarea>
    </div>

    <div class="container">
        <label for="adresse">Adresse:</label>
        <textarea id="adresse" rows="2" readonly></textarea>
    </div>

    <div class="container">
        <label for="geburtsdatumKind">Geburtsdatum des Kindes:</label>
        <textarea id="geburtsdatumKind" rows="2" readonly></textarea>
    </div>

    <div class="container">
        <label for="geschwisterstatus">Geschwisterstatus:</label>
        <textarea id="geschwisterstatus" rows="2" readonly></textarea>
    </div>

    <div class="container">
        <label for="wohnortnahe">Entfernung zur Kita (in km):</label>
        <textarea id="wohnortnahe" rows="2" readonly></textarea>
    </div>

    <div class="container">
        <label for="outputField">Ausgaben (Prozessstatus):</label>
        <textarea id="outputField" rows="4" readonly></textarea>
    </div>

    <div class="container">
        <label for="statusField">Statusmodell:</label>
        <textarea id="statusField" rows="6" readonly class="status-field"></textarea>
    </div>

    <!-- Weiter-Button -->
    <div class="button-container">
        <button id="nextStepBtn" onclick="nextStep()">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
        };

        // Statusmodell für den gesamten Prozess
        const statusModel = [
            "Schritt 1: Elternzugang über SSI",
            "Schritt 2: Daten eingereicht",
            "Schritt 3: Datenverifikation",
            "Schritt 4: KI-basierte Analyse und Priorisierung",
            "Schritt 5: Dokumentation abgeschlossen",
            "Schritt 6: Bezahlung erforderlich",
            "Schritt 7: Automatisierte Platzzuweisung",
            "Schritt 8: Benachrichtigung gesendet",
            "Schritt 9: Feedback eingeholt"
        ];

        // Erklärungen für die einzelnen Schritte
        const explanations = [
            "In diesem Schritt wird die Identität der Eltern über die Selbstsouveräne Identität (SSI) geprüft.",
            "Die Daten der Eltern (z.B. Adresse, Name, Geburtsdatum des Kindes) werden in das System eingereicht.",
            "Die eingereichten Daten werden mit den Behörden abgeglichen und verifiziert.",
            "Die KI analysiert die Daten und priorisiert den Antrag basierend auf den Informationen (z.B. Geschwisterstatus, Entfernung zur Kita).",
            "Die Daten werden in der Blockchain dokumentiert, um eine transparente und sichere Aufzeichnung zu gewährleisten.",
            "Die Zahlung für den Kita-Platz wird über die Payment-Blockchain abgewickelt.",
            "Ein Platz in der Kita wird zugewiesen und das Zuweisungsdatum wird festgelegt.",
            "Eltern erhalten eine Benachrichtigung, dass ihr Platz in der Kita zugewiesen wurde.",
            "Die Eltern geben Feedback zum Prozess, um die Erfahrung zu verbessern."
        ];

        // Funktion zum Update von Eingabe, Ausgabe und Status
        function updateFields(output, status, explanation) {
            document.getElementById("vaterName").value = elternDaten.vaterName;
            document.getElementById("mutterName").value = elternDaten.mutterName;
            document.getElementById("kindName").value = elternDaten.kindName;
            document.getElementById("adresse").value = elternDaten.adresse;
            document.getElementById("geburtsdatumKind").value = elternDaten.geburtsdatumKind;
            document.getElementById("geschwisterstatus").value = elternDaten.geschwisterstatus ? "Ja" : "Nein";
            document.getElementById("wohnortnahe").value = elternDaten.wohnortnahe;
            document.getElementById("outputField").value = `${output}\n\nErklärung: ${explanation}`;
            document.getElementById("statusField").value = status;
        }

        // Funktion zum Hervorheben des aktuellen Schritts im Statusmodell
        function highlightStatusModel(stepIndex) {
            let highlightedStatus = statusModel.map((status, index) => {
                if (index === stepIndex) {
                    return `> ${status} <`;  // Markiere den aktuellen Schritt
                } else {
                    return status;
                }
            }).join('\n');
            return highlightedStatus;
        }

        // Schrittweise Ausführung des Prozesses
        function nextStep() {
            switch (step) {
                case 0:
                    // Schritt 1: Identitätsprüfung
                    updateFields(
                        "Identität wird überprüft...",
                        highlightStatusModel(step),
                        explanations[0]
                    );
                    step++;
                    break;
                case 1:
                    // Schritt 2: Einreichen der einmaligen Daten
                    updateFields(
                        "Daten eingereicht.",
                        highlightStatusModel(step),
                        explanations[1]
                    );
                    step++;
                    break;
                case 2:
                    // Schritt 3: Datenverifikation
                    setTimeout(() => {
                        updateFields(
                            "Daten verifiziert.",
                            highlightStatusModel(step),
                            explanations[2]
                        );
                        step++;
                    }, 1000); // Simuliert eine Verzögerung
                    break;
                case 3:
                    // Schritt 4: KI-basierte Priorisierung des Antrags
                    elternDaten.prioritaet = 8;  // Dummy-Priorität
                    updateFields(
                        `KI Eingabe: Priorisierung - Dummy-Priorität = ${elternDaten.prioritaet}`,
                        highlightStatusModel(step),
                        explanations[3]
                    );
                    step++;
                    break;
                case 4:
                    // Schritt 5: Dokumentation in Blockchain
                    updateFields(
                        "Daten in Blockchain dokumentiert.",
                        highlightStatusModel(step),
                        explanations[4]
                    );
                    step++;
                    break;
                case 5:
                    // Schritt 6: Bezahlung über Blockchain
                    updateFields(
                        "Zahlung von " + elternDaten.vaterName + " wird verarbeitet.",
                        highlightStatusModel(step),
                        explanations[5]
                    );
                    step++;
                    break;
                case 6:
                    // Schritt 7: Platzzuweisung
                    updateFields(
                        "Platz zugewiesen: Kita Sonnenschein, Zuweisungsdatum: 2024-12-15",
                        highlightStatusModel(step),
                        explanations[6]
                    );
                    step++;
                    break;
                case 7:
                    // Schritt 8: Benachrichtigung gesendet
                    updateFields(
                        "Benachrichtigung gesendet: Ihr Platz in der Kita Sonnenschein wurde zugewiesen.",
                        highlightStatusModel(step),
                        explanations[7]
                    );
                    step++;
                    break;
                case 8:
                    // Schritt 9: Feedback eingeholt
                    updateFields(
                        "Feedback eingeholt: Schneller Prozess, mehr Transparenz gewünscht.",
                        highlightStatusModel(step),
                        explanations[8]
                    );
                    step++;
                    break;
                default:
                    alert("Prozess abgeschlossen!");
                    break;
            }
        }

        // Initialisierung des Prozesses
        nextStep();  // Starte beim ersten Schritt
    </script>
</body>
</html>