/* document.addEventListener("DOMContentLoaded", () => {
    const container = document.getElementById("geraetezuordnung-container");
    const loadingIndicator = document.getElementById("loading-indicator");
    const lazyloadingUrl = "https://{$SERVER_NAME}/core/base/lazyloading.php"; // Dynamischer Pfad zur PHP-Datei


    let offset = 0;
    const limit = 10;
    let loading = false;
    let hasMoreData = true;
    const articleId = document.getElementById("geraetezuordnung-container").dataset.articleId;

    const loadGeraetezuordnung = async () => {
        if (loading || !hasMoreData) return;

        loading = true;
        loadingIndicator.style.display = "block";

        try {
            const response = await fetch(`${lazyloadingUrl}?offset=${offset}&limit=${limit}&articleId=${articleId}`);
            const result = await response.json();

            result.data.forEach(item => {
                const div = document.createElement("div");
                div.innerHTML = `
                    <p><strong>${item.bezeichnungoriginal || "Unbekanntes Gerät"}</strong></p>
                    <p>Nummer: ${item.nr || "N/A"}</p>
                `;
                container.appendChild(div);
            });

            offset += limit;
            hasMoreData = result.hasMore;
        } catch (error) {
            console.error("Fehler beim Laden der Gerätezuordnung:", error);
        }

        loading = false;
        loadingIndicator.style.display = "none";
    };

    const observer = new IntersectionObserver(entries => {
        if (entries[0].isIntersecting) {
            loadGeraetezuordnung();
        }
    }, { threshold: 1.0 });

    observer.observe(loadingIndicator);
});
 */

document.addEventListener("DOMContentLoaded", () => {
    const container = document.getElementById("geraetezuordnung-container");
    const loadingIndicator = document.getElementById("loading-indicator");

    const lazyloadingUrl = "/web/intelectra_shop/php/lazyloading.php";
    const articleId = container.dataset.articleId;

    let offset = 0;
    const limit = 10;
    let loading = false;
    let hasMoreData = true;

    const loadGeraetezuordnung = async () => {
        if (loading || !hasMoreData) return;

        loading = true;
        loadingIndicator.style.display = "block";

        try {
            const response = await fetch(`${lazyloadingUrl}?offset=${offset}&limit=${limit}&articleId=${articleId}`);
            if (!response.ok) {
                throw new Error(`HTTP-Error: ${response.status}`);
            }
            const result = await response.json();

            result.data.forEach(item => {
                const div = document.createElement("div");
                div.innerHTML = `
                    <h4>${item.item_name} (${item.parent_wg})</h4>
                    <p><strong>${item.bezeichnungoriginal}</strong></p>
                    <p>Nummer: ${item.nr}</p>
                    <p>Produktionszeitraum: ${item.produktionsstart} - ${item.produktionsende}</p>
                `;
                container.appendChild(div);
            });

            offset += limit;
            hasMoreData = result.hasMore;
        } catch (error) {
            console.error("Fehler beim Laden der Gerätezuordnung:", error);
        }

        loading = false;
        loadingIndicator.style.display = "none";
    };

    // Intersection Observer für Lazy Loading
    const observer = new IntersectionObserver(entries => {
        if (entries[0].isIntersecting) {
            loadGeraetezuordnung();
        }
    }, { threshold: 1.0 });

    observer.observe(loadingIndicator);
});
