var warenkorb = [];
if (window.location.pathname.includes("/produkte.html")) {
    document.addEventListener("DOMContentLoaded", function () {


        const produktpreise = {
            "karotte": 0.95, // Preis für Karotten
            "sellerie": 1.10, // Preis für Sellerie
            "birnen": 0.50, // Preis für Birnen
            "kiwi": 0.95, // Preis für Kiwi
            "orangen": 2.0, //Preis für Orangen
            "aepfel": 2.0 //Preis für Aepfel
        };
        // Hole button1 - button6
        for (let i = 1; i <= 6; i++) {
            const button = document.getElementById("button" + i);

            button.addEventListener("click", function (event) {
                // verhindern Sie das Standardverhalten des Links
                event.preventDefault();

                // ermitteln Sie die ausgewählte Anzahl, die ID und den Preis des Produkts
                const select = button.previousElementSibling;
                const anzahl = select.options[select.selectedIndex].value;
                const produktID = this.parentElement.parentElement.querySelector('img[data-id]').getAttribute('data-id');
                console.log(produktID);
                const preis = produktpreise[produktID];

                //Produkt in den Warenkorb hinzufügen
                produktHinzufuegen(produktID, anzahl, preis);
            });
        }


        function produktHinzufuegen(produktID, anzahl, preis) {
            // Objekt mit Produktinformationen erstellen
            let produkt = {
                id: produktID,
                anzahl: anzahl,
                preis: preis // Gesamtpreis berechnen
            };

            // Produkt zum Warenkorb hinzufügen
            warenkorb.push(produkt);
            const notification = document.getElementById('notification');

            // Anzeigen der Nachricht
            notification.textContent = 'Produkt wurde zum Warenkorb hinzugefügt!';
            notification.style.display = 'block';

            // Nachricht nach 3s ausblenden
            setTimeout(function () {
                notification.style.display = 'none';
            }, 3000);

            // Ausgabe des aktuellen Warenkorbs (zum Testen)
            console.log(warenkorb);

            localStorage.setItem("warenkorb", JSON.stringify(warenkorb));
        }

    });
}
function createWarenkorbDiv(warenkorb) {

    for (const produkt of warenkorb) {
        if (produkt.id === "karotte") {
            const warenkorbDiv = document.createElement("div");
            warenkorbDiv.setAttribute("data-id", "karotte");
            warenkorbDiv.classList.add("produkte_warenkorb");
            const produktBild = document.createElement("img");
            produktBild.src = "pictures/karotte_ohne_preis.webp"
            produktBild.alt = produkt.id;
            warenkorbDiv.appendChild(produktBild);

            const produktDetails = document.createElement("div");
            produktDetails.classList.add("produkte_details");
            const produktBeschreibung = document.createTextNode("Karotten 1kg");
            const produktPreis = document.createTextNode("Kosten: 0.95€");
            const aufLager = document.createTextNode("Auf Lager: 250");
            produktDetails.appendChild(produktBeschreibung);
            produktDetails.appendChild(document.createElement("br"));
            produktDetails.appendChild(produktPreis);
            produktDetails.appendChild(document.createElement("br"));
            produktDetails.appendChild(document.createElement("br"));
            produktDetails.appendChild(aufLager);

            const buttonMitMenue = document.createElement("div");
            buttonMitMenue.classList.add("button_mit_menue");
            const paraButton = document.createElement("p");
            const buttonEntfernen = document.createElement("a");
            buttonEntfernen.classList.add("button_entfernen");
            buttonEntfernen.innerText = "Entfernen";
            buttonEntfernen.setAttribute("href", "#");

            const menue = document.createElement("input");
            menue.setAttribute("type", "number");
            menue.setAttribute("id", "menue");
            menue.setAttribute("value", produkt.anzahl);
            menue.setAttribute("max", produkt.anzahl);
            menue.setAttribute("min", "0");
            menue.setAttribute("pattern", "[0-9]*");
            paraButton.appendChild(buttonEntfernen);
            buttonMitMenue.appendChild(paraButton);
            buttonMitMenue.appendChild(menue);

            const gesamtPreis = document.createElement("p");
            gesamtPreis.classList.add("gesamtbetrag");
            const gesamtPreisText = document.createTextNode("Betrag Gesamt (inkl. MwSt): " + ((produkt.preis * produkt.anzahl).toFixed(2)));
            gesamtPreis.appendChild(gesamtPreisText);


            warenkorbDiv.appendChild(produktDetails);
            warenkorbDiv.appendChild(gesamtPreis);
            warenkorbDiv.appendChild(buttonMitMenue);
            const warenkorbContainer = document.querySelector(".warenkorb-container");
            warenkorbContainer.appendChild(warenkorbDiv);
            buttonEntfernen.addEventListener("click", function (event) {
                if (produkt.anzahl > 1) {
                    produkt.anzahl--;
                    localStorage.setItem("warenkorb", JSON.stringify(warenkorb));
                } else {
                    entferneProdukt("karotte");
                    console.log("Hier ausgabe vom Warenkorb:");
                    console.log(warenkorb);
                    const karotteContainer = document.querySelector('[data-id="karotte"]');
                    //Löschen vom warenkorbDiv
                    warenkorbContainer.removeChild(karotteContainer);
                }
                location.reload(true);
            });
        } else if (produkt.id === "sellerie") {
            const warenkorbDiv = document.createElement("div");
            warenkorbDiv.setAttribute("data-id", "sellerie");
            warenkorbDiv.classList.add("produkte_warenkorb");
            const produktBild = document.createElement("img");
            produktBild.src = "pictures/sellerie_ohne_preis.webp"
            produktBild.alt = produkt.id;
            warenkorbDiv.appendChild(produktBild);

            const produktDetails = document.createElement("div");
            produktDetails.classList.add("produkte_details");

            const produktBeschreibung = document.createTextNode("Sellerie 1 Stück");
            const produktPreis = document.createTextNode("Kosten: 1.10€");
            const aufLager = document.createTextNode("Auf Lager: 1000");

            produktDetails.appendChild(produktBeschreibung);
            produktDetails.appendChild(document.createElement("br"));
            produktDetails.appendChild(produktPreis);
            produktDetails.appendChild(document.createElement("br"));
            produktDetails.appendChild(document.createElement("br"));
            produktDetails.appendChild(aufLager);

            const buttonMitMenue = document.createElement("div");
            buttonMitMenue.classList.add("button_mit_menue");
            const paraButton = document.createElement("p");
            const buttonEntfernen = document.createElement("a");
            buttonEntfernen.classList.add("button_entfernen");
            buttonEntfernen.innerText = "Entfernen";
            buttonEntfernen.setAttribute("href", "#");

            const menue = document.createElement("input");
            menue.setAttribute("type", "number");
            menue.setAttribute("id", "menue");
            menue.setAttribute("value", produkt.anzahl);
            menue.setAttribute("max", produkt.anzahl);
            menue.setAttribute("min", "0");
            menue.setAttribute("pattern", "[0-9]*");
            paraButton.appendChild(buttonEntfernen);
            buttonMitMenue.appendChild(paraButton);
            buttonMitMenue.appendChild(menue);

            const gesamtPreis = document.createElement("p");
            gesamtPreis.classList.add("gesamtbetrag");
            const gesamtPreisText = document.createTextNode("Betrag Gesamt (inkl. MwSt): " + ((produkt.preis * produkt.anzahl).toFixed(2)));
            gesamtPreis.appendChild(gesamtPreisText);


            warenkorbDiv.appendChild(produktDetails);
            warenkorbDiv.appendChild(gesamtPreis);
            warenkorbDiv.appendChild(buttonMitMenue);
            const warenkorbContainer = document.querySelector(".warenkorb-container");
            warenkorbContainer.appendChild(warenkorbDiv);
            buttonEntfernen.addEventListener("click", function (event) {
                if (produkt.anzahl > 1) {
                    produkt.anzahl--;
                    localStorage.setItem("warenkorb", JSON.stringify(warenkorb));
                } else {
                    entferneProdukt("sellerie");
                    console.log("Hier ausgabe vom Warenkorb:");
                    console.log(warenkorb);
                    const sellerieContainer = document.querySelector('[data-id="sellerie"]');
                    //Löschen vom warenkorbDiv
                    warenkorbContainer.removeChild(sellerieContainer);
                }
                location.reload(true);
            });
        } else if (produkt.id === "birnen") {
            const warenkorbDiv = document.createElement("div");
            warenkorbDiv.setAttribute("data-id", "birnen");
            warenkorbDiv.classList.add("produkte_warenkorb");
            const produktBild = document.createElement("img");
            produktBild.src = "pictures/birne_ohne_preis.webp"
            produktBild.alt = produkt.id;
            warenkorbDiv.appendChild(produktBild);

            const produktDetails = document.createElement("div");
            produktDetails.classList.add("produkte_details");

            const produktBeschreibung = document.createTextNode("Birne 0.5kg");
            const produktPreis = document.createTextNode("Kosten: 0.50€");
            const aufLager = document.createTextNode("Auf Lager: 500");

            produktDetails.appendChild(produktBeschreibung);
            produktDetails.appendChild(document.createElement("br"));
            produktDetails.appendChild(produktPreis);
            produktDetails.appendChild(document.createElement("br"));
            produktDetails.appendChild(document.createElement("br"));
            produktDetails.appendChild(aufLager);

            const buttonMitMenue = document.createElement("div");
            buttonMitMenue.classList.add("button_mit_menue");
            const paraButton = document.createElement("p");
            const buttonEntfernen = document.createElement("a");
            buttonEntfernen.classList.add("button_entfernen");
            buttonEntfernen.innerText = "Entfernen";
            buttonEntfernen.setAttribute("href", "#");

            const menue = document.createElement("input");
            menue.setAttribute("type", "number");
            menue.setAttribute("id", "menue");
            menue.setAttribute("value", produkt.anzahl);
            menue.setAttribute("max", produkt.anzahl);
            menue.setAttribute("min", "0");
            menue.setAttribute("pattern", "[0-9]*");
            paraButton.appendChild(buttonEntfernen);
            buttonMitMenue.appendChild(paraButton);
            buttonMitMenue.appendChild(menue);

            const gesamtPreis = document.createElement("p");
            gesamtPreis.classList.add("gesamtbetrag");
            const gesamtPreisText = document.createTextNode("Betrag Gesamt (inkl. MwSt): " + ((produkt.preis * produkt.anzahl).toFixed(2)));
            gesamtPreis.appendChild(gesamtPreisText);


            warenkorbDiv.appendChild(produktDetails);
            warenkorbDiv.appendChild(gesamtPreis);
            warenkorbDiv.appendChild(buttonMitMenue);
            const warenkorbContainer = document.querySelector(".warenkorb-container");
            warenkorbContainer.appendChild(warenkorbDiv);
            buttonEntfernen.addEventListener("click", function (event) {
                if (produkt.anzahl > 1) {
                    produkt.anzahl--;
                    localStorage.setItem("warenkorb", JSON.stringify(warenkorb));
                } else {
                    entferneProdukt("birnen");
                    console.log("Hier ausgabe vom Warenkorb:");
                    console.log(warenkorb);
                    const birnenContainer = document.querySelector('[data-id="birnen"]');
                    //Löschen vom warenkorbDiv
                    warenkorbContainer.removeChild(birnenContainer);
                }
                location.reload(true);
            });
        } else if (produkt.id === "kiwi") {
            const warenkorbDiv = document.createElement("div");
            warenkorbDiv.setAttribute("data-id", "kiwi");
            warenkorbDiv.classList.add("produkte_warenkorb");
            const produktBild = document.createElement("img");
            produktBild.src = "pictures/kiwi_ohne_preis.png.avif"
            produktBild.alt = produkt.id;
            warenkorbDiv.appendChild(produktBild);

            const produktDetails = document.createElement("div");
            produktDetails.classList.add("produkte_details");

            const produktBeschreibung = document.createTextNode("Kiwi 0.5kg");
            const produktPreis = document.createTextNode("Kosten: 0.95€");
            const aufLager = document.createTextNode("Auf Lager: 250");
            produktDetails.appendChild(produktBeschreibung);
            produktDetails.appendChild(document.createElement("br"));
            produktDetails.appendChild(produktPreis);
            produktDetails.appendChild(document.createElement("br"));
            produktDetails.appendChild(document.createElement("br"));
            produktDetails.appendChild(aufLager);

            const buttonMitMenue = document.createElement("div");
            buttonMitMenue.classList.add("button_mit_menue");
            const paraButton = document.createElement("p");
            const buttonEntfernen = document.createElement("a");
            buttonEntfernen.classList.add("button_entfernen");
            buttonEntfernen.innerText = "Entfernen";
            buttonEntfernen.setAttribute("href", "#");

            const menue = document.createElement("input");
            menue.setAttribute("type", "number");
            menue.setAttribute("id", "menue");
            menue.setAttribute("value", produkt.anzahl);
            menue.setAttribute("max", produkt.anzahl);
            menue.setAttribute("min", "0");
            menue.setAttribute("pattern", "[0-9]*");
            paraButton.appendChild(buttonEntfernen);
            buttonMitMenue.appendChild(paraButton);
            buttonMitMenue.appendChild(menue);

            const gesamtPreis = document.createElement("p");
            gesamtPreis.classList.add("gesamtbetrag");
            const gesamtPreisText = document.createTextNode("Betrag Gesamt (inkl. MwSt): " + ((produkt.preis * produkt.anzahl).toFixed(2)));
            gesamtPreis.appendChild(gesamtPreisText);


            warenkorbDiv.appendChild(produktDetails);
            warenkorbDiv.appendChild(gesamtPreis);
            warenkorbDiv.appendChild(buttonMitMenue);
            const warenkorbContainer = document.querySelector(".warenkorb-container");
            warenkorbContainer.appendChild(warenkorbDiv);
            buttonEntfernen.addEventListener("click", function (event) {
                if (produkt.anzahl > 1) {
                    produkt.anzahl--;
                    localStorage.setItem("warenkorb", JSON.stringify(warenkorb));
                } else {
                    entferneProdukt("kiwi");
                    console.log("Hier ausgabe vom Warenkorb:");
                    console.log(warenkorb);
                    const kiwiContainer = document.querySelector('[data-id="kiwi"]');
                    //Löschen vom warenkorbDiv
                    warenkorbContainer.removeChild(kiwiContainer);
                }
                location.reload(true);
            });
        } else if (produkt.id === "orangen") {
            const warenkorbDiv = document.createElement("div");
            warenkorbDiv.setAttribute("data-id", "orangen");
            warenkorbDiv.classList.add("produkte_warenkorb");
            const produktBild = document.createElement("img");
            produktBild.src = "pictures/orangen_ohne_preis.png.avif";
            produktBild.alt = produkt.id;
            warenkorbDiv.appendChild(produktBild);

            const produktDetails = document.createElement("div");
            produktDetails.classList.add("produkte_details");

            const produktBeschreibung = document.createTextNode("Orangen 1kg");
            const produktPreis = document.createTextNode("Kosten: 2€");
            const aufLager = document.createTextNode("Auf Lager: 350");

            produktDetails.appendChild(produktBeschreibung);
            produktDetails.appendChild(document.createElement("br"));
            produktDetails.appendChild(produktPreis);
            produktDetails.appendChild(document.createElement("br"));
            produktDetails.appendChild(document.createElement("br"));
            produktDetails.appendChild(aufLager);

            const buttonMitMenue = document.createElement("div");
            buttonMitMenue.classList.add("button_mit_menue");
            const paraButton = document.createElement("p");
            const buttonEntfernen = document.createElement("a");
            buttonEntfernen.classList.add("button_entfernen");
            buttonEntfernen.innerText = "Entfernen";
            buttonEntfernen.setAttribute("href", "#");

            const menue = document.createElement("input");
            menue.setAttribute("type", "number");
            menue.setAttribute("id", "menue");
            menue.setAttribute("value", produkt.anzahl);
            menue.setAttribute("max", produkt.anzahl);
            menue.setAttribute("min", "0");
            menue.setAttribute("pattern", "[0-9]*");
            paraButton.appendChild(buttonEntfernen);
            buttonMitMenue.appendChild(paraButton);
            buttonMitMenue.appendChild(menue);

            const gesamtPreis = document.createElement("p");
            gesamtPreis.classList.add("gesamtbetrag");
            const gesamtPreisText = document.createTextNode("Betrag Gesamt (inkl. MwSt): " + ((produkt.preis * produkt.anzahl).toFixed(2)));
            gesamtPreis.appendChild(gesamtPreisText);


            warenkorbDiv.appendChild(produktDetails);
            warenkorbDiv.appendChild(gesamtPreis);
            warenkorbDiv.appendChild(buttonMitMenue);
            const warenkorbContainer = document.querySelector(".warenkorb-container");
            warenkorbContainer.appendChild(warenkorbDiv);
            buttonEntfernen.addEventListener("click", function (event) {
                if (produkt.anzahl > 1) {
                    produkt.anzahl--;
                    localStorage.setItem("warenkorb", JSON.stringify(warenkorb));
                } else {
                    entferneProdukt("orangen");
                    console.log("Hier ausgabe vom Warenkorb:");
                    console.log(warenkorb);
                    const orangenContainer = document.querySelector('[data-id="orangen"]');
                    //Löschen vom warenkorbDiv
                    warenkorbContainer.removeChild(orangenContainer);
                }
                location.reload(true);
            });
        } else if (produkt.id === "aepfel") {
            const warenkorbDiv = document.createElement("div");
            warenkorbDiv.setAttribute("data-id", "aepfel");
            warenkorbDiv.classList.add("produkte_warenkorb");
            const produktBild = document.createElement("img");
            produktBild.src = "pictures/aepfel_ohne_preis.png.avif"
            produktBild.alt = produkt.id;
            warenkorbDiv.appendChild(produktBild);

            const produktDetails = document.createElement("div");
            produktDetails.classList.add("produkte_details");

            const produktBeschreibung = document.createTextNode("Äpfel 1kg");
            const produktPreis = document.createTextNode("Kosten: 2€");
            const aufLager = document.createTextNode("Auf Lager: 500");

            produktDetails.appendChild(produktBeschreibung);
            produktDetails.appendChild(document.createElement("br"));
            produktDetails.appendChild(produktPreis);
            produktDetails.appendChild(document.createElement("br"));
            produktDetails.appendChild(document.createElement("br"));
            produktDetails.appendChild(aufLager);

            const buttonMitMenue = document.createElement("div");
            buttonMitMenue.classList.add("button_mit_menue");
            const paraButton = document.createElement("p");
            const buttonEntfernen = document.createElement("a");
            buttonEntfernen.classList.add("button_entfernen");
            buttonEntfernen.innerText = "Entfernen";
            buttonEntfernen.setAttribute("href", "#");

            const menue = document.createElement("input");
            menue.setAttribute("type", "number");
            menue.setAttribute("id", "menue");
            menue.setAttribute("value", produkt.anzahl);
            menue.setAttribute("max", produkt.anzahl);
            menue.setAttribute("min", "0");
            menue.setAttribute("pattern", "[0-9]*");
            paraButton.appendChild(buttonEntfernen);
            buttonMitMenue.appendChild(paraButton);
            buttonMitMenue.appendChild(menue);

            const gesamtPreis = document.createElement("p");
            gesamtPreis.classList.add("gesamtbetrag");
            const gesamtPreisText = document.createTextNode("Betrag Gesamt (inkl. MwSt): " + ((produkt.preis * produkt.anzahl).toFixed(2)));
            gesamtPreis.appendChild(gesamtPreisText);


            warenkorbDiv.appendChild(produktDetails);
            warenkorbDiv.appendChild(gesamtPreis);
            warenkorbDiv.appendChild(buttonMitMenue);
            const warenkorbContainer = document.querySelector(".warenkorb-container");
            warenkorbContainer.appendChild(warenkorbDiv);
            buttonEntfernen.addEventListener("click", function (event) {
                if (produkt.anzahl > 1) {
                    produkt.anzahl--;
                    localStorage.setItem("warenkorb", JSON.stringify(warenkorb));
                } else {
                    entferneProdukt("aepfel");
                    console.log("Hier ausgabe vom Warenkorb:");
                    console.log(warenkorb);
                    const apfelContainer = document.querySelector('[data-id="aepfel"]');
                    //Löschen vom warenkorbDiv
                    warenkorbContainer.removeChild(apfelContainer);
                }
                location.reload(true);
            });
        }

    }
    const contentContainer = document.querySelector(".content");
    const äußererContainer = document.createElement("div");
    äußererContainer.classList.add("äußererContainer");
    const kostenContainer = document.createElement("div");
    kostenContainer.classList.add("kostenContainer");

    const lieferkostenText = document.createElement("p");
    lieferkostenText.classList.add("lieferkosten_text");
    lieferkostenText.innerText = "Lieferkosten:";

    const lieferkostenPreis = document.createElement("p");
    lieferkostenPreis.classList.add("lieferkosten_preis");
    lieferkostenPreis.innerText = "2.90€";

    const preisZusammen = ermittleGesamtpreis() + 2.9;
    const gesamtPreisText = document.createElement("p");
    gesamtPreisText.classList.add("gesamtkosten_text")
    gesamtPreisText.innerText = "Gesamtkosten (inkl. MwSt): ";
    const gesamtPreis = document.createElement("p");
    gesamtPreis.classList.add("gesamtpreis");
    gesamtPreis.innerText = "" + preisZusammen.toFixed(2) + "€";
    const buttonBestellungAbschließen = document.createElement("div");
    const buttonBestellungAbschließenAnchor = document.createElement("a");
    buttonBestellungAbschließenAnchor.classList.add("button_bestellung_abschließen");
    buttonBestellungAbschließenAnchor.setAttribute("href", "bestellformular.html");
    buttonBestellungAbschließenAnchor.innerText = "Kostenpflichtig bestellen";
    console.log(preisZusammen);
    localStorage.setItem("gesamtpreis", preisZusammen);

    if (warenkorb.length === 0) {
        const warenkorbLeer = document.createElement("p");
        warenkorbLeer.classList.add("warenkorbLeer");
        warenkorbLeer.innerText = "Der Warenkorb ist zur Zeit leer.";
        contentContainer.appendChild(warenkorbLeer);
    } else {
        contentContainer.appendChild(äußererContainer);
        äußererContainer.appendChild(kostenContainer);
        kostenContainer.appendChild(lieferkostenText);
        kostenContainer.appendChild(lieferkostenPreis);
        kostenContainer.appendChild(gesamtPreisText);
        kostenContainer.appendChild(gesamtPreis);
        buttonBestellungAbschließen.appendChild(buttonBestellungAbschließenAnchor);
        äußererContainer.appendChild(buttonBestellungAbschließen);
    }
}
function ermittleGesamtpreis() {
    var preis = 0;
    const warenkorb = JSON.parse(localStorage.getItem("warenkorb")) || [];
    console.log(warenkorb);
    for (produkt of warenkorb) {
        preis += produkt.preis * produkt.anzahl;
    }
    return preis;
}
function entferneProdukt(produktID) {
    const warenkorb = JSON.parse(localStorage.getItem("warenkorb")) || [];
    for (let i = 0; i < warenkorb.length; i++) {
        if (warenkorb[i].id === produktID) {
            warenkorb.splice(i, 1)// entferne das Element aus dem Array

            break; // breche die Schleife ab, da das Element gefunden wurde
        }
    }
    localStorage.setItem("warenkorb", JSON.stringify(warenkorb)); // speichere das aktualisierte Array im LocalStorage
}

// prüfe, ob der Benutzer sich auf der warenkorb.html-Seite befindet und erstelle das DIV
document.addEventListener("DOMContentLoaded", function () {
    // prüfe, ob der Benutzer sich auf der warenkorb.html-Seite befindet und erstelle das DIV
    if (window.location.pathname.includes("/warenkorb.html")) {
        const warenkorb = JSON.parse(localStorage.getItem("warenkorb")) || [];
        createWarenkorbDiv(warenkorb);
    }
});