// Initialisiert Filter, Scroll-Animationen und Modal-Logik
document.addEventListener("DOMContentLoaded", () => {
    initializeEventListeners();
    initializeModalLogic();
    initializeScrollAnimations();
});

// Funktion zum Anwenden von Filtern
function applyFilters(type) {
    const searchInput = document.getElementById("searchInput").value;
    const categoryFilter = document.getElementById("categoryFilter").value;

    let servletUrl = "";
    switch (type) {
        case "speisen":
            servletUrl = "/Projekt_SE2/speisenServlet";
            break;
        case "getraenke":
            servletUrl = "/Projekt_SE2/getraenkeServlet";
            break;
        case "snacks":
            servletUrl = "/Projekt_SE2/snacksServlet";
            break;
        default:
            console.error("Ungültiger Typ für Filterung:", type);
            return;
    }

    fetch(`${servletUrl}?category=${encodeURIComponent(categoryFilter)}&search=${encodeURIComponent(searchInput)}`)
        .then((response) => {
            if (!response.ok) {
                throw new Error(`HTTP-Fehler: ${response.status}`);
            }
            return response.text();
        })
        .then((html) => {
            const contentDiv = document.getElementById(`${type}-inhalt`);
            if (contentDiv) {
                contentDiv.innerHTML = html;
                initializeScrollAnimations();
                initializeModalLogic();
            }
        })
        .catch((err) => console.error("Fehler beim Laden der Inhalte:", err));
}

// Funktion zur Initialisierung von Event-Listenern für Such- und Filtereingaben
function initializeEventListeners() {
    const searchInput = document.getElementById("searchInput");
    const categoryFilter = document.getElementById("categoryFilter");

    // Automatisches Laden für alle Kategorien
    applyFilters("getraenke");

    // Filter-Events für Getränke
    if (document.getElementById("getraenke-content")) {
        searchInput.addEventListener("input", () => applyFilters("getraenke"));
        categoryFilter.addEventListener("change", () => applyFilters("getraenke"));
    }

    // Filter-Events für Speisen
    if (document.getElementById("speisen-inhalt")) {
        searchInput.addEventListener("input", () => applyFilters("speisen"));
        categoryFilter.addEventListener("change", () => applyFilters("speisen"));
        applyFilters("speisen");
    }

    // Filter-Events für Snacks
    if (document.getElementById("snacks-inhalt")) {
        searchInput.addEventListener("input", () => applyFilters("snacks"));
        categoryFilter.addEventListener("change", () => applyFilters("snacks"));
        applyFilters("snacks");
    }
}

// Dynamisches Menü für Handys
function toggleMenu() {
    const nav = document.querySelector(".navigation");
    const menuIcon = document.querySelector(".menu-icon");

    if (nav && menuIcon) {
        nav.classList.toggle("show");
        menuIcon.classList.toggle("open");
        menuIcon.textContent = nav.classList.contains("show") ? "✕ Menu" : "☰ Menu";
    }
}

// Scroll-Animation für Kategorien und Items
function initializeScrollAnimations() {
    const menuSections = document.querySelectorAll(".menu .category");

    function revealItems(section) {
        const items = section.querySelectorAll("li");
        items.forEach((item, index) => {
            setTimeout(() => {
                item.classList.add("visible");
            }, index * 50);
        });
    }

    function onScroll() {
        menuSections.forEach((section) => {
            const sectionPosition = section.getBoundingClientRect().top;
            const screenPosition = window.innerHeight / 1.3;

            if (sectionPosition < screenPosition && !section.classList.contains("animated")) {
                revealItems(section);
                section.classList.add("animated");
            }
        });
    }

    window.addEventListener("scroll", onScroll);
    onScroll(); // Erste Überprüfung
}

// Accordion-Logik für Hinweise und Allergene
function toggleAccordion(id) {
    const content = document.getElementById(id);
    const icon = content.previousElementSibling.querySelector(".toggle-icon");

    if (content.style.display === "none" || content.style.display === "") {
        content.style.display = "block";
        if (icon) icon.textContent = "−";
    } else {
        content.style.display = "none";
        if (icon) icon.textContent = "+";
    }
}

// Login-Popup-Logik
function openLoginPopup() {
    const popup = document.getElementById("loginPopup");
    if (popup) {
        popup.style.display = "block";
    } else {
        console.error("Login-Popup-Element nicht gefunden.");
    }
}

function closeLoginPopup() {
    const popup = document.getElementById("loginPopup");
    if (popup) {
        popup.style.display = "none";
        const loginForm = document.getElementById("loginForm");
        if (loginForm) loginForm.reset();
    }
}

window.onclick = function (event) {
    const popup = document.getElementById("loginPopup");
    if (event.target === popup) {
        closeLoginPopup();
    }
};