Websites/Profice WebSite/scripts/lead-details.js

// lead-details.js

document.addEventListener("DOMContentLoaded", function() {
    const urlParams = new URLSearchParams(window.location.search);
    const leadId = urlParams.get('id');
    const detailsContainer = document.getElementById('leadDetailsContent');

    function getLeads() {
        const storedLeads = localStorage.getItem('myLeads');
        if (storedLeads) {
            return JSON.parse(storedLeads);
        } else {
            return []; 
        }
    }

    function getStatusClass(status) {
        const statusClasses = {
            'neu': 'status-new',
            'in-bearbeitung': 'status-in-progress',
            'abgeschlossen': 'status-completed',
            'storniert': 'status-cancelled'
        };
        return statusClasses[status] || 'status-new';
    }

    function formatDate(dateString) {
        const date = new Date(dateString);
        return date.toLocaleDateString('de-DE', {
            day: '2-digit',
            month: '2-digit',
            year: 'numeric',
            hour: '2-digit',
            minute: '2-digit'
        });
    }

    if (leadId && detailsContainer) {
        const leadsData = getLeads();
        const lead = leadsData.find(l => l.id == leadId);

        if (lead) {
            detailsContainer.innerHTML = `
                <div class="lead-details-card">
                    <!-- Status Section -->
                    <div class="detail-section">
                        <h2 class="section-title">Status</h2>
                        <div class="status-container">
                            <span class="status-badge ${getStatusClass(lead.status)}">${lead.statusText}</span>
                            <p class="status-info">Letzte Aktualisierung: ${formatDate(lead.datum)}</p>
                        </div>
                    </div>

                    <!-- Contact Information -->
                    <div class="detail-section">
                        <h2 class="section-title">Kontaktinformationen</h2>
                        <div class="info-grid">
                            <div class="info-item">
                                <div class="info-label">Name</div>
                                <div class="info-value">${lead.name || 'Nicht angegeben'}</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">Organisation</div>
                                <div class="info-value">${lead.organisation || 'Nicht angegeben'}</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">Kontakt</div>
                                <div class="info-value">${lead.contact || 'Nicht angegeben'}</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">Budget</div>
                                <div class="info-value">${lead.budget || 'Nicht angegeben'}</div>
                            </div>
                        </div>
                    </div>

                    <!-- Service Information -->
                    <div class="detail-section">
                        <h2 class="section-title">Dienstleistung</h2>
                        <div class="service-info">
                            <div class="service-icon">${getServiceIcon(lead.dienstleistung)}</div>
                            <div class="service-details">
                                <h3 class="service-title">${lead.dienstleistung}</h3>
                                <p class="service-description">${getServiceDescription(lead.dienstleistung)}</p>
                            </div>
                        </div>
                    </div>

                    <!-- Project Description -->
                    ${lead.description ? `
                    <div class="detail-section">
                        <h2 class="section-title">Projektbeschreibung</h2>
                        <div class="description-box">
                            <p class="description-text">${lead.description}</p>
                        </div>
                    </div>
                    ` : ''}

                    <!-- Timeline -->
                    <div class="detail-section">
                        <h2 class="section-title">Zeitstrahl</h2>
                        <div class="timeline">
                            <div class="timeline-item active">
                                <div class="timeline-dot"></div>
                                <div class="timeline-content">
                                    <h4>Anfrage erhalten</h4>
                                    <p>${formatDate(lead.datum)}</p>
                                </div>
                            </div>
                            <div class="timeline-item ${lead.status !== 'neu' ? 'active' : ''}">
                                <div class="timeline-dot"></div>
                                <div class="timeline-content">
                                    <h4>In Bearbeitung</h4>
                                    <p>${lead.status !== 'neu' ? 'Anfrage wird bearbeitet' : 'Ausstehend'}</p>
                                </div>
                            </div>
                            <div class="timeline-item ${lead.status === 'abgeschlossen' ? 'active' : ''}">
                                <div class="timeline-dot"></div>
                                <div class="timeline-content">
                                    <h4>Abgeschlossen</h4>
                                    <p>${lead.status === 'abgeschlossen' ? 'Projekt erfolgreich abgeschlossen' : 'Ausstehend'}</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Actions -->
                    <div class="detail-section">
                        <h2 class="section-title">Aktionen</h2>
                        <div class="action-buttons">
                            <button class="action-btn primary" onclick="window.print()">
                                🖨️ Details drucken
                            </button>
                            <button class="action-btn secondary" onclick="shareLead()">
                                📤 Teilen
                            </button>
                            <button class="action-btn secondary" onclick="exportLead()">
                                📄 Exportieren
                            </button>
                        </div>
                    </div>
                </div>
            `;

            // Update page title
            document.title = `Profice - Anfrage von ${lead.name || 'Unbekannt'}`;
        } else {
            detailsContainer.innerHTML = `
                <div class="error-message">
                    <h2>Anfrage nicht gefunden</h2>
                    <p>Die angeforderte Anfrage konnte nicht gefunden werden.</p>
                    <a href="leads.html" class="cta-btn secondary">Zurück zum Dashboard</a>
                </div>
            `;
        }
    } else {
        detailsContainer.innerHTML = `
            <div class="error-message">
                <h2>Keine Anfrage-ID angegeben</h2>
                <p>Bitte navigieren Sie über das Leads Dashboard zu den Details.</p>
                <a href="leads.html" class="cta-btn secondary">Zum Dashboard</a>
            </div>
        `;
    }
});

function getServiceIcon(service) {
    const icons = {
        'Website': '🌐',
        'KI Integration': '🤖',
        'Automatisation': '⚙️',
        'Unabhängige Wahl': '🎯'
    };
    return icons[service] || '📋';
}

function getServiceDescription(service) {
    const descriptions = {
        'Website': 'Moderne, responsive Webseiten, die konvertieren und Ihre Marke perfekt repräsentieren.',
        'KI Integration': 'Nutzen Sie die Kraft künstlicher Intelligenz, um Ihre Daten besser zu verstehen und Prozesse zu optimieren.',
        'Automatisation': 'Sparen Sie Zeit und Ressourcen durch intelligente Workflow-Automatisierungen.',
        'Unabhängige Wahl': 'Maßgeschneiderte Lösungen für Ihre spezifischen Anforderungen.'
    };
    return descriptions[service] || 'Individuelle Dienstleistung.';
}

function shareLead() {
    if (navigator.share) {
        navigator.share({
            title: document.title,
            text: 'Details meiner Projektanfrage bei Profice',
            url: window.location.href
        });
    } else {
        // Fallback for browsers that don't support Web Share API
        navigator.clipboard.writeText(window.location.href);
        alert('Link wurde in die Zwischenablage kopiert!');
    }
}

function exportLead() {
    window.print();
}