baumer/js/main.js

// Aktuelles Jahr im Footer setzen
document.getElementById('year').textContent = new Date().getFullYear();

// URL-Parameter für Erfolgs-/Fehlermeldungen prüfen (Kontaktformular)
document.addEventListener('DOMContentLoaded', () => {
    const urlParams = new URLSearchParams(window.location.search);
    
    // Erfolgsmeldung anzeigen
    if (urlParams.get('success') === '1') {
        const successAlert = document.getElementById('alertSuccess');
        if (successAlert) {
            successAlert.classList.remove('d-none');
            // Formular leeren
            const form = document.getElementById('contactForm');
            if (form) form.reset();
            // Nach oben scrollen
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }
    }
    
    // Fehlermeldung anzeigen
    if (urlParams.get('error') === '1') {
        const errorAlert = document.getElementById('alertError');
        if (errorAlert) {
            errorAlert.classList.remove('d-none');
            const reason = urlParams.get('reason');
            if (reason === 'rate_limit') {
                errorAlert.innerHTML = '<i class="bi bi-exclamation-triangle-fill"></i> <strong>Zu viele Anfragen!</strong> Bitte warten Sie einen Moment, bevor Sie erneut versuchen.';
            }
            // Nach oben scrollen
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }
    }
    
    // Kontaktformular: Maschine aus URL Parameter vorausfüllen
    const maschine = urlParams.get('maschine');
    const maschineInput = document.getElementById('maschine');
    if (maschine && maschineInput) {
        maschineInput.value = decodeURIComponent(maschine);
    }
    
    // Submit-Button Feedback
    const contactForm = document.getElementById('contactForm');
    if (contactForm) {
        contactForm.addEventListener('submit', function() {
            const submitBtn = document.getElementById('submitBtn');
            if (submitBtn) {
                submitBtn.disabled = true;
                submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Wird gesendet...';
            }
        });
    }
    
    // Maschinen laden
    loadMaschinen();
});

// Maschinen laden und anzeigen
async function loadMaschinen() {
    try {
        const response = await fetch('data/maschinen.json');
        const data = await response.json();
        
        // Baumaschinen anzeigen
        displayMaschinen(data.baumaschinen, 'baumaschinen-container');
        
        // Gartengeräte anzeigen
        displayMaschinen(data.gartengeraete, 'gartengeraete-container');
    } catch (error) {
        console.error('Fehler beim Laden der Maschinen:', error);
    }
}

// Maschinen-Karten erstellen und anzeigen
function displayMaschinen(maschinen, containerId) {
    const container = document.getElementById(containerId);
    if (!container) return;
    
    container.innerHTML = '';
    
    maschinen.forEach(maschine => {
        const card = createMaschinenCard(maschine);
        container.appendChild(card);
    });
}

// Einzelne Maschinen-Karte erstellen
function createMaschinenCard(maschine) {
    const col = document.createElement('div');
    col.className = 'col-md-6 col-lg-4';
    
    // Besonderheiten als Liste
    let besonderheitenHTML = '';
    if (maschine.besonderheiten && maschine.besonderheiten.length > 0) {
        besonderheitenHTML = '<ul class="list-unstyled mt-3">';
        maschine.besonderheiten.forEach(item => {
            besonderheitenHTML += `<li><i class="bi bi-check-circle-fill text-success"></i> ${item}</li>`;
        });
        besonderheitenHTML += '</ul>';
    }
    
    // Spezifikationen
    let specsHTML = '<div class="specs mt-3 mb-3">';
    if (maschine.gewicht) {
        specsHTML += `<span class="badge bg-secondary me-2 mb-2"><i class="bi bi-weight"></i> ${maschine.gewicht}</span>`;
    }
    if (maschine.leistung) {
        specsHTML += `<span class="badge bg-secondary me-2 mb-2"><i class="bi bi-lightning-charge"></i> ${maschine.leistung}</span>`;
    }
    if (maschine.arbeitsbreite) {
        specsHTML += `<span class="badge bg-secondary me-2 mb-2"><i class="bi bi-arrows-expand"></i> ${maschine.arbeitsbreite}</span>`;
    }
    specsHTML += '</div>';
    
    // Lieferung Info
    let lieferungHTML = '';
    if (maschine.lieferung) {
        lieferungHTML = `
            <div class="alert alert-info mt-3 mb-0">
                <small><i class="bi bi-truck"></i> <strong>Lieferung:</strong> ${maschine.lieferung}</small>
            </div>
        `;
    }
    
    // Mehrtagiger Preis
    let mehrtagigHTML = '';
    if (maschine.preisMehrtagig) {
        mehrtagigHTML = `<p class="text-muted small mb-2">${maschine.preisMehrtagig}</p>`;
    }
    
    // Bild HTML
    let imageHTML = '';
    if (maschine.image) {
        imageHTML = `<img src="${maschine.image}" class="card-img-top" alt="${maschine.title}">`;
    }
    
    col.innerHTML = `
        <div class="card h-100 shadow-sm hover-card">
            ${imageHTML}
            <div class="card-header bg-primary text-white">
                <h5 class="card-title mb-0">${maschine.title}</h5>
            </div>
            <div class="card-body">
                <p class="card-text">${maschine.beschreibung}</p>
                
                ${specsHTML}
                ${besonderheitenHTML}
                
                <div class="preis-box mt-auto">
                    <div class="d-flex justify-content-between align-items-center">
                        <span class="text-muted">Preis:</span>
                        <span class="h4 mb-0 text-primary fw-bold">${maschine.preis}</span>
                    </div>
                    ${mehrtagigHTML}
                </div>
                
                ${lieferungHTML}
            </div>
            <div class="card-footer bg-transparent border-top-0">
                <a href="kontakt.html?maschine=${encodeURIComponent(maschine.title)}" class="btn btn-outline-primary w-100">
                    <i class="bi bi-envelope"></i> Anfrage senden
                </a>
            </div>
        </div>
    `;
    
    return col;
}

// Beim Laden der Seite
document.addEventListener('DOMContentLoaded', () => {
    loadMaschinen();
    
    // Kontaktformular: Maschine aus URL Parameter vorausfüllen
    const urlParams = new URLSearchParams(window.location.search);
    const maschine = urlParams.get('maschine');
    const maschineInput = document.getElementById('maschine');
    
    if (maschine && maschineInput) {
        maschineInput.value = decodeURIComponent(maschine);
    }
});

// Smooth Scroll für Anker-Links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            target.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        }
    });
});