/* ==================== GRUßKARTEN EDITIER-STYLES ==================== */ .zp-edit-item-compact { cursor: pointer !important; background: #FFFFFF !important; color: #3A3A3A !important; border: 1px solid #D1D5DB !important; border-radius: 5px !important; margin-left: 8px !important; font-size: 12px !important; padding: 2px 6px !important; transition: all 0.2s ease !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 22px !important; height: 22px !important; } .zp-edit-item-compact:hover { background: #3b82f6 !important; color: #FFFFFF !important; border-color: #3b82f6 !important; transform: translateY(-1px) !important; } .zp-greeting-card-message { grid-column: 1 / -1 !important; margin: 5px 10px 12px 10px !important; padding: 10px 12px !important; background: #f8fafc !important; border-radius: 8px !important; border: 1px solid #e5e7eb !important; border-left: 4px solid #8b5cf6 !important; font-size: 12px !important; color: #6b7280 !important; line-height: 1.4 !important; display: block !important; visibility: visible !important; opacity: 1 !important; transition: all 0.2s ease !important; } .zp-greeting-card-message:hover { background: #f0f9ff !important; border-color: #d1d5db !important; } .greeting-card-item { background: #faf5ff !important; border-left: 3px solid #8b5cf6 !important; position: relative; } .greeting-card-item .item-name { color: #7c3aed !important; font-weight: 600 !important; } .greeting-card-item::before { content: "💌"; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: 12px; opacity: 0.7; } /* Animationen */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } } /* Responsive */ @media (max-width: 768px) { .zp-edit-item-compact { width: 20px !important; height: 20px !important; font-size: 10px !important; margin-left: 4px !important; } .zp-greeting-card-message { margin: 4px 5px 10px 5px !important; padding: 8px 10px !important; font-size: 11px !important; } } // ==================== GRUßKARTEN EDITIER-FUNKTIONEN ==================== // 1. Grußkartentext bearbeiten function zpEditGreetingMessage(cardId) { console.log('Bearbeite Grußkarte:', cardId); var productId = 41838; var storageKey = 'zp_current_product_' + productId; try { var selection = JSON.parse(localStorage.getItem(storageKey) || '{"items":{}, "total":0}'); var card = selection.items[cardId]; if (!card) { alert('Grußkarte nicht gefunden'); return; } var currentMessage = card.greetingMessage || ''; var cardName = card.name || 'Grußkarte'; // Erstelle Editier-Dialog var overlay = document.createElement('div'); overlay.id = 'zp-edit-greeting-overlay'; overlay.style.cssText = ` position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 99999; animation: fadeIn 0.3s ease; `; overlay.innerHTML = ` `; document.body.appendChild(overlay); // Fokus setzen setTimeout(() => { var textarea = document.getElementById('zp-edit-message-input'); if (textarea) { textarea.focus(); textarea.setSelectionRange(textarea.value.length, textarea.value.length); } }, 100); } catch(error) { console.error('Fehler beim Bearbeiten:', error); alert('Fehler: ' + error.message); } } // 2. Zeichenzähler für Edit-Dialog function zpUpdateEditCharCounter() { var textarea = document.getElementById('zp-edit-message-input'); var counter = document.getElementById('zp-edit-char-count'); if (!textarea || !counter) return; var count = textarea.value.length; counter.textContent = count + '/500'; counter.style.color = count >= 500 ? '#ef4444' : count > 450 ? '#f59e0b' : '#9ca3af'; } // 3. Nachricht speichern function zpSaveGreetingMessage(cardId, deleteMessage = false) { var productId = 41838; var storageKey = 'zp_current_product_' + productId; try { var selection = JSON.parse(localStorage.getItem(storageKey) || '{"items":{}, "total":0}'); var card = selection.items[cardId]; if (!card) { console.error('Karte nicht gefunden:', cardId); return; } var newMessage = ''; if (!deleteMessage) { var textarea = document.getElementById('zp-edit-message-input'); if (textarea) { newMessage = textarea.value.trim(); } } // Nachricht aktualisieren card.greetingMessage = newMessage; // Name aktualisieren (mit/ohne Nachricht) if (newMessage) { // Entferne "(mit persönlicher Nachricht)" falls vorhanden var baseName = card.originalName || card.name.replace(' (mit persönlicher Nachricht)', ''); card.name = baseName + ' (mit persönlicher Nachricht)'; } else { // Setze auf Originalname zurück card.name = card.originalName || card.name.replace(' (mit persönlicher Nachricht)', ''); } // Speichern localStorage.setItem(storageKey, JSON.stringify(selection)); // Dialog schließen var overlay = document.getElementById('zp-edit-greeting-overlay'); if (overlay) overlay.remove(); // Liste aktualisieren zpUpdateSelectionList(); // Erfolgsmeldung var message = deleteMessage ? 'Nachricht gelöscht' : 'Nachricht gespeichert'; zpShowNotification('✓ ' + message, 'success'); // Event auslösen var event = new CustomEvent('zp-selection-changed', { detail: { productId: productId, selection: selection, source: 'greeting_edit', action: deleteMessage ? 'message_deleted' : 'message_updated', cardId: cardId } }); document.dispatchEvent(event); } catch(error) { console.error('Fehler beim Speichern:', error); zpShowNotification('✗ Fehler: ' + error.message, 'error'); } } // 4. Direktes Inline-Editieren (optional - einfachere Version) function zpEditGreetingInline(cardId) { var messageDiv = document.getElementById('message-text-' + cardId); if (!messageDiv) return; var currentText = messageDiv.textContent; // Ersetze durch Textarea messageDiv.outerHTML = ` `; // Fokus setzen setTimeout(() => { var textarea = document.getElementById('inline-edit-' + cardId); if (textarea) textarea.focus(); }, 50); } // 5. Inline-Edit speichern function zpSaveInlineEdit(cardId) { var textarea = document.getElementById('inline-edit-' + cardId); if (!textarea) return; var newMessage = textarea.value.trim(); var productId = 41838; var storageKey = 'zp_current_product_' + productId; try { var selection = JSON.parse(localStorage.getItem(storageKey)); if (selection && selection.items[cardId]) { selection.items[cardId].greetingMessage = newMessage; localStorage.setItem(storageKey, JSON.stringify(selection)); zpUpdateSelectionList(); zpShowNotification('✓ Nachricht aktualisiert', 'success'); } } catch(e) { console.error('Inline edit error:', e); } } // 6. Inline-Edit abbrechen function zpCancelInlineEdit(cardId) { zpUpdateSelectionList(); } // 7. Notification anzeigen function zpShowNotification(message, type) { var div = document.createElement('div'); div.style.cssText = ` position: fixed; top: 20px; right: 20px; padding: 12px 20px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 99998; font-weight: 600; font-size: 14px; animation: slideInRight 0.3s ease; display: flex; align-items: center; gap: 8px; ${type === 'success' ? 'background: #10b981; color: white;' : 'background: #ef4444; color: white;'} `; div.innerHTML = message; document.body.appendChild(div); setTimeout(() => { div.style.opacity = '0'; div.style.transform = 'translateX(100px)'; setTimeout(() => div.remove(), 300); }, 2000); } // 8. Verbesserter Entfernen-Button für Grußkarten function zpRemoveGreetingCard(cardId) { if (confirm('Möchten Sie diese Grußkarte wirklich entfernen?')) { zpRemoveItem(cardId); } } // 9. Event Listener für Enter-Taste im Edit-Dialog document.addEventListener('keydown', function(e) { var overlay = document.getElementById('zp-edit-greeting-overlay'); if (overlay && e.key === 'Enter' && (e.ctrlKey || e.metaKey)) { var cardId = overlay.querySelector('button[onclick*="zpSaveGreetingMessage"]') .getAttribute('onclick') .match(/'([^']+)'/)[1]; zpSaveGreetingMessage(cardId); } });