// 🎂 BIRTHDAY CARD GUESTBOOK SYSTEM V3.0 - FIXED console.log('🚀 Khởi tạo Birthday Card Guestbook System V3.0'); // Global variables window.currentCardId = null; window.supabaseUrl = 'https://uxslyotmrqjbesbehwwt.supabase.co'; window.supabaseKey = 'sb_publishable_P4TsKUVgvBBvf7pug29XYw_ao6Mluvk'; // Enhanced updateCardIdForGuestbook function window.updateCardIdForGuestbook = function(cardId) { console.log('📋 Cập nhật Card ID cho guestbook:', cardId); window.currentCardId = cardId; // Update hidden input in form const cardIdInput = document.getElementById('card-id-input'); if (cardIdInput) { cardIdInput.value = cardId; console.log('✅ Đã cập nhật card-id-input:', cardId); } // Load existing messages if (cardId && window.supabaseUrl && window.supabaseKey) { loadGuestbookMessages(cardId); } }; // Enhanced loadGuestbookMessages function async function loadGuestbookMessages(cardId) { if (!cardId || !window.supabaseUrl || !window.supabaseKey) { console.warn('⚠️ Thiếu thông tin để tải messages'); return; } try { console.log('📖 Đang tải messages cho card:', cardId); const response = await fetch(window.supabaseUrl + '/functions/v1/guestbook?card_id=' + encodeURIComponent(cardId), { method: 'GET', headers: { 'Authorization': 'Bearer ' + window.supabaseKey, 'Content-Type': 'application/json' } }); if (response.ok) { const data = await response.json(); console.log('✅ Tải được', data.messages?.length || 0, 'messages'); displayGuestbookMessages(data.messages || []); } else { console.warn('⚠️ Không tải được messages:', response.status); displayGuestbookMessages([]); } } catch (error) { console.error('❌ Lỗi tải messages:', error); displayGuestbookMessages([]); } } // Enhanced displayGuestbookMessages function function displayGuestbookMessages(messages) { const container = document.getElementById('guestbook-container'); if (!container) { console.warn('⚠️ Không tìm thấy guestbook-container'); return; } if (!messages || messages.length === 0) { container.innerHTML = '

' + '' + 'Chưa có lời chúc nào. Hãy là người đầu tiên!' + '

'; return; } // Sort messages by date (newest first) messages.sort((a, b) => new Date(b.created_at || b.inserted_at) - new Date(a.created_at || a.inserted_at)); const messagesHtml = messages.map(msg => { const date = new Date(msg.created_at || msg.inserted_at).toLocaleString('vi-VN'); return `

${msg.author_name || 'Khách mời'}

${date}

${msg.message_text}

`; }).join(''); container.innerHTML = '

' + '

💌 Sổ lưu bút (' + messages.length + ' lời chúc)

' + messagesHtml + '

'; console.log('✅ Hiển thị', messages.length, 'messages'); } // Enhanced form submission async function submitGuestbookMessage(event) { event.preventDefault(); const form = event.target; const submitBtn = form.querySelector('button[type="submit"]'); const authorName = form.author_name.value.trim(); const messageText = form.message_text.value.trim(); const cardId = form.card_id.value || window.currentCardId; console.log('📝 Gửi message:', { authorName, messageText, cardId }); // Validation if (!authorName || !messageText) { alert('❌ Vui lòng nhập đầy đủ tên và lời chúc!'); return; } if (!cardId) { alert('❌ Không xác định được ID thiệp!'); return; } if (messageText.length > 500) { alert('❌ Lời chúc không được vượt quá 500 ký tự!'); return; } // Show loading const originalText = submitBtn.innerHTML; submitBtn.disabled = true; submitBtn.innerHTML = ' Đang gửi...'; try { if (!window.supabaseUrl || !window.supabaseKey) { throw new Error('Chưa cấu hình Supabase'); } const response = await fetch(window.supabaseUrl + '/functions/v1/guestbook', { method: 'POST', headers: { 'Authorization': 'Bearer ' + window.supabaseKey, 'Content-Type': 'application/json' }, body: JSON.stringify({ card_id: cardId, author_name: authorName, message_text: messageText }) }); const result = await response.json(); if (response.ok && result.success) { // Show success showNotification('✅ Đã gửi lời chúc thành công!', 'success'); // Clear form form.reset(); document.getElementById('message-count').textContent = '0'; // Reload messages await loadGuestbookMessages(cardId); console.log('✅ Gửi message thành công'); } else { throw new Error(result.error || 'Không thể gửi lời chúc'); } } catch (error) { console.error('❌ Lỗi gửi message:', error); showNotification('❌ Lỗi gửi lời chúc: ' + error.message, 'error'); } finally { // Restore button submitBtn.disabled = false; submitBtn.innerHTML = originalText; } } // Enhanced notification system function showNotification(message, type = 'success') { // Remove existing notifications const existing = document.querySelectorAll('.birthday-notification'); existing.forEach(el => el.remove()); const notification = document.createElement('div'); notification.className = `birthday-notification fixed top-4 right-4 z-50 p-4 rounded-xl shadow-2xl transform transition-all duration-500 max-w-sm ${ type === 'success' ? 'bg-gradient-to-r from-green-500 to-emerald-500 text-white' : 'bg-gradient-to-r from-red-500 to-pink-500 text-white' }`; notification.innerHTML = `

${type === 'success' ? '✅' : '❌'}

${message}

`; document.body.appendChild(notification); // Animate in setTimeout(() => notification.style.transform = 'translateX(0)', 100); // Remove after delay setTimeout(() => { notification.style.transform = 'translateX(100%)'; notification.style.opacity = '0'; setTimeout(() => notification.remove(), 500); }, 5000); } // Character counter for textarea function updateCharacterCount() { const textarea = document.getElementById('message'); const counter = document.getElementById('message-count'); if (textarea && counter) { counter.textContent = textarea.value.length; if (textarea.value.length > 500) { counter.style.color = '#ef4444'; textarea.style.borderColor = '#ef4444'; } else { counter.style.color = '#9ca3af'; textarea.style.borderColor = '#4b5563'; } } } // Initialize when DOM is ready document.addEventListener('DOMContentLoaded', function() { console.log('🎯 DOM loaded, initializing guestbook...'); // Setup form submission const messageForm = document.getElementById('message-form'); if (messageForm) { messageForm.addEventListener('submit', submitGuestbookMessage); console.log('✅ Form listener added'); } // Setup character counter const messageTextarea = document.getElementById('message'); if (messageTextarea) { messageTextarea.addEventListener('input', updateCharacterCount); console.log('✅ Character counter added'); } // Load messages if card ID is available if (window.currentCardId) { loadGuestbookMessages(window.currentCardId); } console.log('🎉 Guestbook system V3.0 initialized successfully!'); }); console.log('✅ Birthday Card Guestbook System V3.0 loaded');

Đang tải thiệp...