/**
 * Dieser Code lädt beim Start der Seite (DOMContentLoaded) Header und Footer dynamisch vom Server
 * (über /header und /footer) und fügt sie in die vorgesehenen Elemente ein.
 * Tritt ein Fehler auf (z.B. Datei nicht vorhanden oder Serverproblem),
 * wird eine Fehlermeldung direkt auf der Webseite angezeigt.
 */

// Warten bis das gesamte DOM geladen ist
document.addEventListener("DOMContentLoaded", () => {
    // Header laden
    const headerTarget = document.getElementById("header");
    if (headerTarget) {
        // Header-Inhalt vom Server anfordern
        fetch("/header")
            .then(response => {
                // Prüfen, ob die Antwort erfolgreich war
                if (!response.ok) throw new Error("Header nicht gefunden");
                return response.text();
            })
            .then(data => {
                // Header-Inhalt in die Seite einfügen
                headerTarget.innerHTML = data;

                // 🚀 WICHTIG: Jetzt den Warenkorb zählen, nachdem der Header geladen ist!
                zeigeWarenkorbAnzahl();
            })
            .catch(error => {
                // Fehlerbehandlung: Fehlermeldung im Header-Bereich anzeigen
                headerTarget.innerHTML = `
                    <div style="background: #ffdede; color: #a00; padding: 10px; text-align: center;">
                        Fehler beim Laden des Headers.
                    </div>`;
                console.error(error);
            });
    }

    // Footer laden
    const footerTarget = document.getElementById("footer");
    if (footerTarget) {
        // Footer-Inhalt vom Server anfordern
        fetch("/footer")
            .then(response => {
                // Prüfen, ob die Antwort erfolgreich war
                if (!response.ok) throw new Error("Footer nicht gefunden");
                return response.text();
            })
            .then(data => {
                // Footer-Inhalt in die Seite einfügen
                footerTarget.innerHTML = data;
            })
            .catch(error => {
                // Fehlerbehandlung: Die Fehlermeldung im Footer-Bereich anzeigen
                footerTarget.innerHTML = `
                    <div style="background: #ffdede; color: #a00; padding: 10px; text-align: center;">
                        Fehler beim Laden der Fußzeile.
                    </div>`;
                console.error(error);
            });
    }

    window.zeigeWarenkorbAnzahl = function() {
        const warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
        let anzahl = 0;
    
        warenkorb.forEach(produkt => {
            anzahl += produkt.quantity;
        });
    
        const anzahlElement = document.getElementById('cart-count');
        if (anzahlElement) {
            anzahlElement.textContent = anzahl;
        }
        console.log('Warenkorb-Anzahl:', anzahl);
    }
});