| ${escapeHtml(namePreview)} |
${escapeHtml(emailPreview)} |
${escapeHtml(phonePreview)} |
${escapeHtml(subjectPreview)} |
${escapeHtml(messagePreview)} |
${escapeHtml(datePreview)} |
`;
}).join('');
// Add event listeners to name cells
document.querySelectorAll('.name-cell').forEach(cell => {
cell.addEventListener('click', function() {
const index = parseInt(this.getAttribute('data-contact-index'), 10);
const contact = contacts[index];
if (contact) {
showMessageModal(contact);
}
});
});
}
document.getElementById('exportBtn').addEventListener('click', function () {
showAdminExportChooser({
title: 'Export Contact Entries',
description: 'Choose CSV for spreadsheets or PDF for a printable report.',
onCsv: function () {
exportTableToCsv('#contactsTable', `contact_entries_${new Date().toISOString().split('T')[0]}`);
},
onPdf: function () {
exportTableToPdf('#contactsTable', `contact_entries_${new Date().toISOString().split('T')[0]}`, 'Contact Entries');
}
});
});
// Search functionality
document.getElementById('searchInput').addEventListener('keyup', function() {
const searchTerm = this.value.toLowerCase();
const filtered = allContacts.filter(contact => {
return (contact.name || '').toLowerCase().includes(searchTerm) ||
(contact.email || '').toLowerCase().includes(searchTerm) ||
(contact.subject || '').toLowerCase().includes(searchTerm) ||
(contact.message || '').toLowerCase().includes(searchTerm);
});
renderContactsTable(filtered);
});
// Message Modal Functions
function showMessageModal(contact) {
const modalBody = document.getElementById('modalBody');
const messageModal = document.getElementById('messageModal');
const dateText = contact.date ? new Date(contact.date).toLocaleString() : '-';
const emailValue = String(contact.email || '').trim();
const phoneValue = String(contact.phone || '').trim();
const waNumber = normalizePhoneNumber(phoneValue);
modalBody.replaceChildren();
const rows = [
['From', contact.name || '-'],
['Email', emailValue || '-'],
['Phone', phoneValue || '-'],
['Subject', contact.subject || '-'],
['Date', dateText]
];
rows.forEach(([label, value]) => {
const row = document.createElement('div');
row.style.marginBottom = '8px';
const strong = document.createElement('strong');
strong.textContent = `${label}: `;
row.appendChild(strong);
row.appendChild(document.createTextNode(String(value || '-')));
modalBody.appendChild(row);
});
const messageLabel = document.createElement('div');
messageLabel.style.marginTop = '12px';
messageLabel.style.paddingTop = '12px';
messageLabel.style.borderTop = '1px solid #e5e7eb';
const label = document.createElement('strong');
label.textContent = 'Message:';
messageLabel.appendChild(label);
modalBody.appendChild(messageLabel);
const message = document.createElement('div');
message.style.marginTop = '6px';
message.textContent = String(contact.message || '-');
modalBody.appendChild(message);
const actions = document.createElement('div');
actions.className = 'contact-modal-actions';
actions.style.marginTop = '12px';
if (emailValue) {
const mailLink = document.createElement('a');
mailLink.href = `mailto:${encodeURIComponent(emailValue)}?subject=${encodeURIComponent('Re: ' + (contact.subject || 'Contact Form Submission'))}`;
mailLink.target = '_blank';
mailLink.rel = 'noreferrer';
mailLink.textContent = 'Open Mail';
actions.appendChild(mailLink);
}
if (phoneValue) {
const phoneLink = document.createElement('a');
phoneLink.href = `tel:${phoneValue}`;
phoneLink.textContent = 'Call Phone';
actions.appendChild(phoneLink);
if (waNumber) {
const waLink = document.createElement('a');
waLink.href = `https://wa.me/${waNumber}?text=${encodeURIComponent('Hello ' + (contact.name || '') + ', regarding your contact form submission.')}`;
waLink.target = '_blank';
waLink.rel = 'noreferrer';
waLink.textContent = 'Open WhatsApp';
actions.appendChild(waLink);
}
}
if (actions.childNodes.length) {
modalBody.appendChild(actions);
}
messageModal.classList.add('show');
}
function closeMessageModal() {
const messageModal = document.getElementById('messageModal');
messageModal.classList.remove('show');
}
// Close modal when clicking outside
document.getElementById('messageModal').addEventListener('click', function(e) {
if (e.target === this) {
closeMessageModal();
}
});
// Sort functionality
let sortDirection = {};
function sortTable(columnIndex) {
const columnNames = ['name', 'email', 'phone', 'subject', 'message', 'date'];
const columnName = columnNames[columnIndex];
const direction = sortDirection[columnName] === 'asc' ? 'desc' : 'asc';
sortDirection[columnName] = direction;
allContacts.sort((a, b) => {
let aVal = (a[columnName] || '').toString().toLowerCase();
let bVal = (b[columnName] || '').toString().toLowerCase();
if (columnName === 'date') {
aVal = new Date(a.date || 0).getTime();
bVal = new Date(b.date || 0).getTime();
}
if (direction === 'asc') {
return aVal < bVal ? -1 : aVal > bVal ? 1 : 0;
} else {
return aVal > bVal ? -1 : aVal < bVal ? 1 : 0;
}
});
renderContactsTable(allContacts);
}