@extends('layouts.app')

@section('title', translate('AdminAnatomy.create_title'))

<!-- Version: 2.3 -->

@section('content')
<div class="container d-flex">
    <!-- Linke Seite: Baumstruktur -->
    <div class="container d-flex">
    <!-- Linke Seite: Baumstruktur -->
    <div id="tree-container" class="w-40 pr-3">
        <h2>{{ translate('AdminAnatomy.tree_title') }}</h2>
        <ul id="tree">
    @foreach($topographies as $topography)
        @if(is_null($topography->mother_id))
            @include('AdminAnatomy.tree_node', ['node' => $topography])
        @endif
    @endforeach
</ul>

    </div>

    <!-- Rechte Seite: Formular -->
    <div id="form-container" class="w-60 p-3 border-left" style="display: none;">
        <h2 id="form-title"></h2>
        <form id="topography-form" action="{{ url('AdminAnatomy/create') }}" method="POST">
            @csrf
            <input type="hidden" name="entry_id" id="entry-id" value="">
            <input type="hidden" name="mother_id" id="mother-id" value="">

            <!-- Debug: Anzeige der Mother-ID -->
            <p id="mother-id-display" style="font-weight: bold; color: red;"></p>

            <!-- Lateinischer Name -->
            <label for="region-latin">{{ translate('AdminAnatomy.create.region_latin_name') }}</label>
            <input type="text" name="region" id="region-latin" required>

            <!-- Name in der gewählten Sprache -->
            <label for="region-{{ session('language', 'de') }}">{{ translate('AdminAnatomy.create.region-lang-name') }}</label>
            <input type="text" name="region_{{ session('language', 'de') }}" id="region-{{ session('language', 'de') }}" required>

            <!-- Mehrzeilige Felder -->
            <label for="definition-{{ session('language', 'de') }}">{{ translate('AdminAnatomy.create.definition') }}</label>
            <textarea name="definition_{{ session('language', 'de') }}" id="definition-{{ session('language', 'de') }}" rows="3"></textarea>

            <label for="description-{{ session('language', 'de') }}">{{ translate('AdminAnatomy.create.description') }}</label>
            <textarea name="description_{{ session('language', 'de') }}" id="description-{{ session('language', 'de') }}" rows="3"></textarea>

            <label for="function-{{ session('language', 'de') }}">{{ translate('AdminAnatomy.create.function') }}</label>
            <textarea name="function_{{ session('language', 'de') }}" id="function-{{ session('language', 'de') }}" rows="3"></textarea>

            <button type="submit" class="btn btn-success mt-2">{{ translate('glb_submit_update') }}</button>
        </form>
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
    let openedNodes = JSON.parse(sessionStorage.getItem("openedNodes")) || [];

    document.querySelectorAll(".toggle-icon").forEach(icon => {
        let parentLi = icon.closest("li");
        let nodeId = parentLi.getAttribute("data-id");

        if (openedNodes.includes(nodeId)) {
            parentLi.classList.add("expanded");
        }

        icon.addEventListener("click", function() {
            parentLi.classList.toggle("expanded");
            if (parentLi.classList.contains("expanded")) {
                if (!openedNodes.includes(nodeId)) openedNodes.push(nodeId);
            } else {
                openedNodes = openedNodes.filter(id => id !== nodeId);
            }
            sessionStorage.setItem("openedNodes", JSON.stringify(openedNodes));
            
            fetch("{{ url('AdminAnatomy/saveOpenedNodes') }}", {
                method: "POST",
                headers: {
                    "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content,
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({ openedNodes: openedNodes })
            });
        });
    });

    // Laden der gespeicherten geöffneten Knoten aus der Laravel-Session
    fetch("{{ url('AdminAnatomy/getOpenedNodes') }}")
        .then(response => response.json())
        .then(data => {
            if (data.openedNodes) {
                sessionStorage.setItem("openedNodes", JSON.stringify(data.openedNodes));
                document.querySelectorAll("li").forEach(li => {
                    let nodeId = li.getAttribute("data-id");
                    if (data.openedNodes.includes(nodeId)) {
                        li.classList.add("expanded");
                    }
                });
            }
        })
        .catch(error => console.error("Fehler beim Laden der geöffneten Knoten:", error));

    let openedNodes = JSON.parse(sessionStorage.getItem("openedNodes")) || [];

    document.querySelectorAll(".toggle-icon").forEach(icon => {
        let parentLi = icon.closest("li");
        let nodeId = parentLi.getAttribute("data-id");

        if (openedNodes.includes(nodeId)) {
            parentLi.classList.add("expanded");
        }

        icon.addEventListener("click", function() {
            parentLi.classList.toggle("expanded");
            if (parentLi.classList.contains("expanded")) {
                if (!openedNodes.includes(nodeId)) openedNodes.push(nodeId);
            } else {
                openedNodes = openedNodes.filter(id => id !== nodeId);
            }
            sessionStorage.setItem("openedNodes", JSON.stringify(openedNodes));
        });
    });

    console.log("Seite geladen und bereit.");

    // Event-Listener für das Hinzufügen eines neuen Eintrags
    document.querySelectorAll(".add-child").forEach(button => {
        button.addEventListener("click", function() {
            let motherId = this.getAttribute("data-id");
            showForm(motherId, true);
        });

        button.addEventListener("mouseenter", function() {
            let motherId = this.getAttribute("data-id");
            button.setAttribute("title", "Mother-ID: " + motherId);
        });
    });

    // Event-Listener für das Bearbeiten eines Eintrags
    document.querySelectorAll(".edit-node").forEach(button => {
        button.addEventListener("click", function() {
            let entryId = this.getAttribute("data-id");
            loadEntryData(entryId);
        });
    });

    // Event-Listener für das Löschen eines Eintrags
    document.querySelectorAll(".delete-node").forEach(button => {
        button.addEventListener("click", function() {
            let entryId = this.getAttribute("data-id");

            if (confirm("Soll dieser Eintrag wirklich gelöscht werden?")) {
                fetch("{{ url('AdminAnatomy/create') }}", {
                    method: "POST",
                    headers: {
                        "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content,
                        "Content-Type": "application/json"
                    },
                    body: JSON.stringify({
                        action: "delete",
                        entry_id: entryId
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        location.reload();
                    } else {
                        alert("Fehler beim Löschen: " + (data.message || "Unbekannter Fehler"));
                    }
                })
                .catch(error => console.error("Fehler:", error));
            }
        });
    });

    // Formular-Handling für das Speichern/Bearbeiten eines Eintrags
    document.getElementById("topography-form").addEventListener("submit", function(event) {
        event.preventDefault();
        let formData = new FormData(this);
        formData.append("action", "save");

        fetch(this.action, {
            method: "POST",
            body: formData,
            headers: {
                "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
                setTimeout(() => highlightEntry(data.entry.id), 500); // Hervorhebung nach Neuladen
            } else {
                alert("Fehler beim Speichern!");
            }
        })
        .catch(error => console.error("Fehler:", error));
    });
});

// Funktion zum Laden von bestehenden Eintragsdaten beim Bearbeiten
function loadEntryData(entryId) {
    fetch("{{ url('AdminAnatomy/create') }}?entry_id=" + entryId)
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            let entry = data.entry;
            document.getElementById("form-container").style.display = "block";
            document.getElementById("entry-id").value = entry.id;
            document.getElementById("mother-id").value = entry.mother_id ? entry.mother_id : "";
            document.getElementById("region-latin").value = entry.region;
            document.getElementById("region-{{ session('language', 'de') }}").value = entry["region_{{ session('language', 'de') }}"];
            document.getElementById("definition-{{ session('language', 'de') }}").value = entry["definition_{{ session('language', 'de') }}"];
            document.getElementById("description-{{ session('language', 'de') }}").value = entry["description_{{ session('language', 'de') }}"];
            document.getElementById("function-{{ session('language', 'de') }}").value = entry["function_{{ session('language', 'de') }}"];
        } else {
            alert("Fehler beim Laden der Daten!");
        }
    })
    .catch(error => console.error("Fehler:", error));
}

// Funktion zum Anzeigen des Formulars für neue Einträge
function showForm(motherId, isNew = false) {
    document.getElementById("form-container").style.display = "block";
    document.getElementById("mother-id").value = motherId ? motherId : "";
    document.getElementById("mother-id-display").innerText = "Mother-ID: " + (motherId ? motherId : "-");

    if (isNew) {
        document.getElementById("entry-id").value = "";
        document.getElementById("region-latin").value = "";
        document.getElementById("region-{{ session('language', 'de') }}").value = "";
        document.getElementById("definition-{{ session('language', 'de') }}").value = "";
        document.getElementById("description-{{ session('language', 'de') }}").value = "";
        document.getElementById("function-{{ session('language', 'de') }}").value = "";
    }
}

// Funktion zur Hervorhebung des bearbeiteten oder neuen Eintrags
function highlightEntry(entryId) {
    let entryElement = document.querySelector(`[data-id="${entryId}"]`);
    if (entryElement) {
        entryElement.classList.add("pulsate");

        // Klasse nach 1,5 Sekunden entfernen
        setTimeout(() => {
            entryElement.classList.remove("pulsate");
        }, 1500);
    }
}
document.addEventListener("DOMContentLoaded", function() {
    let openedNodes = JSON.parse(sessionStorage.getItem("openedNodes")) || [];

    document.querySelectorAll(".toggle-icon").forEach(icon => {
        let parentLi = icon.closest("li");
        let nodeId = parentLi.getAttribute("data-id");

        if (openedNodes.includes(nodeId)) {
            parentLi.classList.add("expanded");
        }

        icon.addEventListener("click", function() {
            parentLi.classList.toggle("expanded");
            if (parentLi.classList.contains("expanded")) {
                if (!openedNodes.includes(nodeId)) openedNodes.push(nodeId);
            } else {
                openedNodes = openedNodes.filter(id => id !== nodeId);
            }
            sessionStorage.setItem("openedNodes", JSON.stringify(openedNodes));
            
            fetch("{{ url('AdminAnatomy/saveOpenedNodes') }}", {
                method: "POST",
                headers: {
                    "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content,
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({ openedNodes: openedNodes })
            });
        });
    });

    // Laden der gespeicherten geöffneten Knoten aus der Laravel-Session
    fetch("{{ url('AdminAnatomy/getOpenedNodes') }}")
        .then(response => response.json())
        .then(data => {
            if (data.openedNodes) {
                sessionStorage.setItem("openedNodes", JSON.stringify(data.openedNodes));
                document.querySelectorAll("li").forEach(li => {
                    let nodeId = li.getAttribute("data-id");
                    if (data.openedNodes.includes(nodeId)) {
                        li.classList.add("expanded");
                    }
                });
            }
        })
        .catch(error => console.error("Fehler beim Laden der geöffneten Knoten:", error));

    let openedNodes = JSON.parse(sessionStorage.getItem("openedNodes")) || [];

    document.querySelectorAll(".toggle-icon").forEach(icon => {
        let parentLi = icon.closest("li");
        let nodeId = parentLi.getAttribute("data-id");

        if (openedNodes.includes(nodeId)) {
            parentLi.classList.add("expanded");
        }

        icon.addEventListener("click", function() {
            parentLi.classList.toggle("expanded");
            if (parentLi.classList.contains("expanded")) {
                if (!openedNodes.includes(nodeId)) openedNodes.push(nodeId);
            } else {
                openedNodes = openedNodes.filter(id => id !== nodeId);
            }
            sessionStorage.setItem("openedNodes", JSON.stringify(openedNodes));
        });
    });

    document.querySelectorAll(".toggle-icon").forEach(icon => {
        icon.addEventListener("click", function() {
            let parentLi = this.closest("li");
            parentLi.classList.toggle("expanded");
        });
    });
});

</script>




@endsection