4076 lines
170 KiB
JavaScript
4076 lines
170 KiB
JavaScript
/**
|
|
* WhatsApp Bot Manager - JavaScript Simplificado
|
|
* Versión sin librerías externas problemáticas
|
|
*/
|
|
|
|
class SimpleWhatsAppManager {
|
|
constructor() {
|
|
this.apiBaseUrl = './api/';
|
|
this.currentTab = 'dashboard';
|
|
|
|
this.init();
|
|
}
|
|
|
|
init() {
|
|
this.log('Iniciando sistema simplificado');
|
|
this.setupEventListeners();
|
|
this.setupCharts();
|
|
this.loadDashboard();
|
|
}
|
|
|
|
log(message, type = 'info') {
|
|
const timestamp = new Date().toLocaleTimeString();
|
|
console.log(`[${timestamp}] [${type.toUpperCase()}] ${message}`);
|
|
}
|
|
|
|
setupEventListeners() {
|
|
this.log('Configurando event listeners');
|
|
|
|
// Navegación de tabs - más defensiva
|
|
const navLinks = document.querySelectorAll('.nav-link[data-tab]');
|
|
if (navLinks) {
|
|
navLinks.forEach(link => {
|
|
link.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
const tabName = link.getAttribute('data-tab');
|
|
if (tabName) {
|
|
this.showTab(tabName);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// Formularios
|
|
this.setupFormListeners();
|
|
}
|
|
|
|
setupFormListeners() {
|
|
// Formulario de configuración
|
|
const system_configForm = document.getElementById('system_config-form');
|
|
if (system_configForm) {
|
|
system_configForm.addEventListener('submit', (e) => {
|
|
e.preventDefault();
|
|
this.savesystem_config();
|
|
});
|
|
}
|
|
|
|
// Formulario de envío de mensaje
|
|
const sendForm = document.getElementById('send-message-form');
|
|
if (sendForm) {
|
|
sendForm.addEventListener('submit', (e) => {
|
|
e.preventDefault();
|
|
this.sendMessage();
|
|
});
|
|
}
|
|
}
|
|
|
|
showTab(tabName) {
|
|
this.log(`Cambiando a tab: ${tabName}`);
|
|
|
|
// Ocultar todas las pestañas
|
|
const tabs = document.querySelectorAll('.tab-content');
|
|
if (tabs) {
|
|
tabs.forEach(tab => tab.classList.remove('active'));
|
|
}
|
|
|
|
// Remover clase active de navegación
|
|
const navLinks = document.querySelectorAll('.nav-link');
|
|
if (navLinks) {
|
|
navLinks.forEach(link => link.classList.remove('active'));
|
|
}
|
|
|
|
// Mostrar pestaña seleccionada
|
|
const targetTab = document.getElementById(tabName);
|
|
if (targetTab) {
|
|
targetTab.classList.add('active');
|
|
}
|
|
|
|
// Activar enlace de navegación
|
|
const activeLink = document.querySelector(`[data-tab="${tabName}"]`);
|
|
if (activeLink) {
|
|
activeLink.classList.add('active');
|
|
}
|
|
|
|
this.currentTab = tabName;
|
|
this.loadTabData(tabName);
|
|
}
|
|
|
|
loadTabData(tabName) {
|
|
this.log(`Cargando datos para tab: ${tabName}`);
|
|
|
|
switch (tabName) {
|
|
case 'dashboard':
|
|
this.loadDashboard();
|
|
break;
|
|
case 'conversations':
|
|
this.loadConversations();
|
|
break;
|
|
case 'users':
|
|
this.loadUsers();
|
|
break;
|
|
case 'send_message':
|
|
this.loadconversations();
|
|
break;
|
|
case 'templates':
|
|
this.loadTemplates();
|
|
break;
|
|
case 'menus':
|
|
this.loadMenus();
|
|
break;
|
|
case 'autoresponses':
|
|
this.loadAutoResponses();
|
|
break;
|
|
case 'logs':
|
|
this.loadLogs();
|
|
break;
|
|
case 'system_config':
|
|
this.loadsystem_config();
|
|
break;
|
|
default:
|
|
this.log(`Tab no reconocido: ${tabName}`, 'warning');
|
|
}
|
|
}
|
|
|
|
async apiCall(endpoint, options = {}) {
|
|
const url = `${this.apiBaseUrl}${endpoint}${endpoint.includes('?') ? '&' : '?'}debug=true`;
|
|
|
|
this.log(`API Call: ${url}`, 'info');
|
|
|
|
try {
|
|
const response = await fetch(url, {
|
|
method: options.method || 'GET',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
...options.headers
|
|
},
|
|
body: options.body ? JSON.stringify(options.body) : undefined
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
|
}
|
|
|
|
const data = await response.json();
|
|
this.log(`API Response: ${JSON.stringify(data).substring(0, 100)}...`, 'success');
|
|
return data;
|
|
|
|
} catch (error) {
|
|
this.log(`API Error: ${error.message}`, 'error');
|
|
this.showError('Error en petición: ' + error.message);
|
|
throw error;
|
|
}
|
|
}
|
|
|
|
async apiCallReal(endpoint, options = {}) {
|
|
const url = `${this.apiBaseUrl}${endpoint}`;
|
|
|
|
this.log(`API Call (REAL): ${url}`, 'info');
|
|
|
|
try {
|
|
const response = await fetch(url, {
|
|
method: options.method || 'GET',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
...options.headers
|
|
},
|
|
body: options.body ? JSON.stringify(options.body) : undefined
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
|
}
|
|
|
|
const data = await response.json();
|
|
this.log(`API Response (REAL): ${JSON.stringify(data).substring(0, 100)}...`, 'success');
|
|
return data;
|
|
|
|
} catch (error) {
|
|
this.log(`API Error (REAL): ${error.message}`, 'error');
|
|
this.showError('Error en petición real: ' + error.message);
|
|
throw error;
|
|
}
|
|
}
|
|
|
|
async loadDashboard() {
|
|
this.log('Cargando dashboard');
|
|
|
|
try {
|
|
// Cargar estadísticas básicas
|
|
const stats = await this.apiCall('get_stats.php');
|
|
this.updateStats(stats);
|
|
|
|
// Cargar mensajes recientes
|
|
const recentconversationsResponse = await this.apiCall('get_recent_messages.php');
|
|
if (recentconversationsResponse && recentconversationsResponse.success && Array.isArray(recentconversationsResponse.data)) {
|
|
this.updateRecentconversations(recentconversationsResponse.data);
|
|
} else if (recentconversationsResponse && Array.isArray(recentconversationsResponse)) {
|
|
// Retrocompatibilidad por si la API devuelve directamente el array
|
|
this.updateRecentconversations(recentconversationsResponse);
|
|
}
|
|
|
|
// Actualizar gráfico si existe
|
|
this.updateChart();
|
|
|
|
} catch (error) {
|
|
this.showError('Error cargando dashboard: ' + error.message);
|
|
}
|
|
}
|
|
|
|
updateStats(stats) {
|
|
this.log('Actualizando estadísticas del dashboard');
|
|
|
|
if (stats) {
|
|
const elements = [
|
|
{ id: 'total-users', value: stats.total_users || 0 },
|
|
{ id: 'conversations-today', value: stats.conversations_today || 0 },
|
|
{ id: 'active-users', value: stats.active_users || 0 },
|
|
{ id: 'total-conversations', value: stats.total_conversations || 0 }
|
|
];
|
|
|
|
elements.forEach(item => {
|
|
const element = document.getElementById(item.id);
|
|
if (element) {
|
|
element.textContent = item.value;
|
|
this.log(`Estadística actualizada: ${item.id} = ${item.value}`);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
updateRecentconversations(conversations) {
|
|
const container = document.getElementById('recent-conversations');
|
|
if (!container) {
|
|
this.log('Contenedor de mensajes recientes no encontrado', 'warning');
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = '';
|
|
|
|
if (conversations && conversations.length > 0) {
|
|
this.log(`Mostrando ${conversations.length} mensajes recientes`);
|
|
conversations.forEach(message => {
|
|
const messageElement = this.createRecentMessageElement(message);
|
|
container.appendChild(messageElement);
|
|
});
|
|
} else {
|
|
container.innerHTML = '<div class="text-center text-muted">No hay mensajes recientes</div>';
|
|
}
|
|
}
|
|
|
|
createRecentMessageElement(message) {
|
|
const div = document.createElement('div');
|
|
div.className = 'recent-message mb-3 p-2 border-bottom';
|
|
|
|
const direction = message.direction === 'incoming' ? '📥' : '📤';
|
|
const time = new Date(message.created_at).toLocaleString();
|
|
|
|
div.innerHTML = `
|
|
<div class="d-flex justify-content-between">
|
|
<span class="fw-bold">${direction} ${message.phone_number}</span>
|
|
<span class="time text-muted small">${time}</span>
|
|
</div>
|
|
<div class="content mt-1">${this.truncateText(message.content, 50)}</div>
|
|
`;
|
|
|
|
return div;
|
|
}
|
|
|
|
truncateText(text, length) {
|
|
if (!text) return '';
|
|
return text.length > length ? text.substring(0, length) + '...' : text;
|
|
}
|
|
|
|
async updateChart() {
|
|
if (!this.charts || !this.charts.conversations) {
|
|
this.log('Gráfico no inicializado, omitiendo actualización', 'warning');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const chartData = await this.apiCall('get_chart_data.php');
|
|
if (chartData && this.charts.conversations) {
|
|
this.charts.conversations.data.labels = chartData.labels || [];
|
|
this.charts.conversations.data.datasets[0].data = chartData.data || [];
|
|
this.charts.conversations.update();
|
|
this.log('Gráfico actualizado correctamente');
|
|
}
|
|
} catch (error) {
|
|
this.log('Error actualizando gráfico: ' + error.message, 'warning');
|
|
}
|
|
}
|
|
|
|
setupCharts() {
|
|
const ctx = document.getElementById('conversationsChart');
|
|
if (!ctx) {
|
|
this.log('Canvas de gráfico no encontrado', 'warning');
|
|
return;
|
|
}
|
|
|
|
if (typeof Chart === 'undefined') {
|
|
this.log('Chart.js no está cargado', 'warning');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
this.charts = this.charts || {};
|
|
this.charts.conversations = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: [],
|
|
datasets: [{
|
|
label: 'Mensajes',
|
|
data: [],
|
|
borderColor: '#25d366',
|
|
backgroundColor: 'rgba(37, 211, 102, 0.1)',
|
|
borderWidth: 3,
|
|
fill: true,
|
|
tension: 0.4
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
grid: {
|
|
color: 'rgba(0,0,0,0.1)'
|
|
}
|
|
},
|
|
x: {
|
|
grid: {
|
|
color: 'rgba(0,0,0,0.1)'
|
|
}
|
|
}
|
|
},
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
}
|
|
}
|
|
}
|
|
});
|
|
this.log('Gráfico de mensajes inicializado');
|
|
} catch (error) {
|
|
this.log('Error inicializando gráfico: ' + error.message, 'error');
|
|
}
|
|
}
|
|
|
|
async loadUsers() {
|
|
this.log('Cargando usuarios');
|
|
|
|
try {
|
|
const response = await this.apiCall('get_users.php');
|
|
|
|
if (response && response.success) {
|
|
this.updateUsersList(response.data || []);
|
|
} else {
|
|
this.showError('No se pudieron cargar los usuarios');
|
|
}
|
|
|
|
} catch (error) {
|
|
this.showError('Error cargando usuarios: ' + error.message);
|
|
}
|
|
}
|
|
|
|
updateUsersList(users) {
|
|
const container = document.getElementById('users-table');
|
|
if (!container) return;
|
|
|
|
// Guardar datos para uso posterior
|
|
this.usersData = users;
|
|
|
|
if (users.length === 0) {
|
|
container.innerHTML = '<tr><td colspan="7" class="text-center text-muted">No hay usuarios registrados</td></tr>';
|
|
return;
|
|
}
|
|
|
|
let html = '';
|
|
|
|
users.forEach(user => {
|
|
const createdDate = new Date(user.created_at);
|
|
const formatDate = createdDate.toLocaleDateString() + ' ' + createdDate.toLocaleTimeString('es', { hour: '2-digit', minute: '2-digit' });
|
|
|
|
html += `
|
|
<tr>
|
|
<td>${user.id}</td>
|
|
<td>${user.phone_number}</td>
|
|
<td>${user.name || 'Sin nombre'}</td>
|
|
<td><span class="badge bg-${user.status === 'active' ? 'success' : 'secondary'}">${user.status}</span></td>
|
|
<td>${user.current_menu || 'Sin menú'}</td>
|
|
<td>${formatDate}</td>
|
|
<td>
|
|
<button class="btn btn-sm btn-outline-primary me-1" onclick="editUser(${user.id})">
|
|
<i class="fas fa-edit"></i>
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-danger" onclick="deleteUser(${user.id})">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
});
|
|
|
|
container.innerHTML = html;
|
|
}
|
|
|
|
async loadConversations() {
|
|
this.log('Cargando conversaciones');
|
|
|
|
try {
|
|
const response = await this.apiCall('get_conversation_list.php');
|
|
console.log('Respuesta get_conversation_list:', response); // Debug
|
|
|
|
if (response && response.success && Array.isArray(response.conversations)) {
|
|
this.updateConversationsList(response.conversations);
|
|
} else if (response && Array.isArray(response)) {
|
|
// Retrocompatibilidad por si la API devuelve directamente el array
|
|
this.updateConversationsList(response);
|
|
} else {
|
|
console.error('Formato de respuesta inesperado:', response);
|
|
this.showError('Error: formato de datos inválido para conversaciones');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error en loadConversations:', error);
|
|
this.showError('Error cargando conversaciones: ' + error.message);
|
|
}
|
|
}
|
|
|
|
updateConversationsList(conversations) {
|
|
const container = document.getElementById('conversations-container');
|
|
if (!container) return;
|
|
|
|
if (conversations.length === 0) {
|
|
container.innerHTML = `
|
|
<div class="conversation-empty">
|
|
<div class="empty-icon">
|
|
<i class="fas fa-comments"></i>
|
|
</div>
|
|
<h5>No hay conversaciones</h5>
|
|
<p>Los chats aparecerán aquí cuando recibas o envíes mensajes</p>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
let html = '';
|
|
|
|
conversations.forEach(conv => {
|
|
const timeAgo = conv.time_ago || this.formatTimeAgo(conv.last_message_time || conv.created_at);
|
|
const lastMessage = conv.last_message || conv.content || 'Sin mensajes';
|
|
const userName = conv.name || conv.phone_number;
|
|
const userInitial = userName.charAt(0).toUpperCase();
|
|
const isOnline = Math.random() > 0.6; // Simulación de estado online
|
|
|
|
// Unread badge
|
|
const unreadBadge = (conv.unread_count && conv.unread_count > 0) ?
|
|
`<div class="conversation-unread">${conv.unread_count}</div>` : '';
|
|
|
|
// Status icon
|
|
const statusIcon = conv.last_direction === 'outgoing'
|
|
? '<i class="fas fa-check-double conversation-status-icon outgoing"></i>'
|
|
: '<i class="fas fa-arrow-down conversation-status-icon incoming"></i>';
|
|
|
|
// Message type indicator
|
|
const messageTypeIcon = conv.last_message_type === 'template'
|
|
? '<i class="fas fa-file-alt text-primary" title="Plantilla"></i> '
|
|
: conv.last_message_type === 'image'
|
|
? '<i class="fas fa-image text-info" title="Imagen"></i> '
|
|
: '';
|
|
|
|
html += `
|
|
<div class="conversation-item" onclick="openChatWindow(${conv.user_id})">
|
|
<div class="conversation-avatar ${isOnline ? 'online' : ''}">
|
|
${userInitial}
|
|
</div>
|
|
<div class="conversation-details">
|
|
<div class="conversation-header">
|
|
<div class="conversation-name">
|
|
${userName}
|
|
${conv.last_message_status === 'read' ? '<i class="fas fa-check-double text-primary" title="Leído"></i>' : ''}
|
|
</div>
|
|
<div class="conversation-time">${timeAgo}</div>
|
|
</div>
|
|
<div class="conversation-preview">
|
|
${statusIcon}
|
|
<div class="conversation-last-message">
|
|
${messageTypeIcon}${lastMessage}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="conversation-meta">
|
|
${unreadBadge}
|
|
<div class="conversation-actions">
|
|
<button class="btn btn-sm" onclick="event.stopPropagation(); openChatWindow(${conv.user_id})" title="Abrir chat">
|
|
<i class="fas fa-comments"></i>
|
|
</button>
|
|
<button class="btn btn-sm" onclick="event.stopPropagation(); viewConversationDetails(${conv.user_id})" title="Ver detalles">
|
|
<i class="fas fa-info-circle"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
container.innerHTML = html;
|
|
|
|
// Agregar funcionalidad de búsqueda
|
|
this.setupConversationSearch(conversations);
|
|
}
|
|
|
|
setupConversationSearch(conversations) {
|
|
const searchInput = document.getElementById('search-conversations');
|
|
if (!searchInput) return;
|
|
|
|
searchInput.addEventListener('input', (e) => {
|
|
const query = e.target.value.toLowerCase().trim();
|
|
|
|
if (!query) {
|
|
this.updateConversationsDisplay(conversations);
|
|
return;
|
|
}
|
|
|
|
const filtered = conversations.filter(conv => {
|
|
const name = (conv.name || '').toLowerCase();
|
|
const phone = (conv.phone_number || '').toLowerCase();
|
|
const message = (conv.last_message || conv.content || '').toLowerCase();
|
|
|
|
return name.includes(query) ||
|
|
phone.includes(query) ||
|
|
message.includes(query);
|
|
});
|
|
|
|
this.updateConversationsDisplay(filtered);
|
|
});
|
|
}
|
|
|
|
updateConversationsDisplay(conversations) {
|
|
const container = document.getElementById('conversations-container');
|
|
if (!container) return;
|
|
|
|
if (conversations.length === 0) {
|
|
container.innerHTML = `
|
|
<div class="conversation-empty">
|
|
<div class="empty-icon">
|
|
<i class="fas fa-search"></i>
|
|
</div>
|
|
<h5>No se encontraron conversaciones</h5>
|
|
<p>Intenta con otros términos de búsqueda</p>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
let html = '';
|
|
conversations.forEach(conv => {
|
|
const timeAgo = conv.time_ago || this.formatTimeAgo(conv.last_message_time || conv.created_at);
|
|
const lastMessage = conv.last_message || conv.content || 'Sin mensajes';
|
|
const userName = conv.name || conv.phone_number;
|
|
const userInitial = userName.charAt(0).toUpperCase();
|
|
const isOnline = Math.random() > 0.6;
|
|
|
|
const unreadBadge = (conv.unread_count && conv.unread_count > 0) ?
|
|
`<div class="conversation-unread">${conv.unread_count}</div>` : '';
|
|
|
|
const statusIcon = conv.last_direction === 'outgoing'
|
|
? '<i class="fas fa-check-double conversation-status-icon outgoing"></i>'
|
|
: '<i class="fas fa-arrow-down conversation-status-icon incoming"></i>';
|
|
|
|
const messageTypeIcon = conv.last_message_type === 'template'
|
|
? '<i class="fas fa-file-alt text-primary" title="Plantilla"></i> '
|
|
: conv.last_message_type === 'image'
|
|
? '<i class="fas fa-image text-info" title="Imagen"></i> '
|
|
: '';
|
|
|
|
html += `
|
|
<div class="conversation-item" onclick="openChatWindow(${conv.user_id})">
|
|
<div class="conversation-avatar ${isOnline ? 'online' : ''}">
|
|
${userInitial}
|
|
</div>
|
|
<div class="conversation-details">
|
|
<div class="conversation-header">
|
|
<div class="conversation-name">
|
|
${userName}
|
|
${conv.last_message_status === 'read' ? '<i class="fas fa-check-double text-primary" title="Leído"></i>' : ''}
|
|
</div>
|
|
<div class="conversation-time">${timeAgo}</div>
|
|
</div>
|
|
<div class="conversation-preview">
|
|
${statusIcon}
|
|
<div class="conversation-last-message">
|
|
${messageTypeIcon}${lastMessage}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="conversation-meta">
|
|
${unreadBadge}
|
|
<div class="conversation-actions">
|
|
<button class="btn btn-sm" onclick="event.stopPropagation(); openChatWindow(${conv.user_id})" title="Abrir chat">
|
|
<i class="fas fa-comments"></i>
|
|
</button>
|
|
<button class="btn btn-sm" onclick="event.stopPropagation(); viewConversationDetails(${conv.user_id})" title="Ver detalles">
|
|
<i class="fas fa-info-circle"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
container.innerHTML = html;
|
|
}
|
|
|
|
formatTimeAgo(datetime) {
|
|
if (!datetime) return '';
|
|
const now = new Date();
|
|
const date = new Date(datetime);
|
|
const diff = Math.floor((now - date) / 1000);
|
|
|
|
if (diff < 60) return 'Ahora';
|
|
if (diff < 3600) return `${Math.floor(diff/60)}m`;
|
|
if (diff < 86400) return `${Math.floor(diff/3600)}h`;
|
|
if (diff < 2592000) return `${Math.floor(diff/86400)}d`;
|
|
return date.toLocaleDateString();
|
|
}
|
|
|
|
async loadsystem_config() {
|
|
this.log('Cargando configuraciones');
|
|
|
|
try {
|
|
const response = await this.apiCall('manage_config.php?action=whatsapp');
|
|
|
|
if (response && response.success) {
|
|
this.updatesystem_configForm(response.data);
|
|
}
|
|
|
|
} catch (error) {
|
|
this.showError('Error cargando configuraciones: ' + error.message);
|
|
}
|
|
}
|
|
|
|
updatesystem_configForm(data) {
|
|
if (!data) return;
|
|
|
|
const fields = [
|
|
{ id: 'whatsapp-token', value: data.whatsapp_token },
|
|
{ id: 'phone-number-id', value: data.phone_number_id },
|
|
{ id: 'webhook-token', value: data.webhook_verify_token },
|
|
{ id: 'api-url', value: data.api_url },
|
|
{ id: 'business-name', value: data.business_name },
|
|
{ id: 'welcome-message', value: data.welcome_message }
|
|
];
|
|
|
|
fields.forEach(field => {
|
|
const element = document.getElementById(field.id);
|
|
if (element && field.value) {
|
|
element.value = field.value;
|
|
this.log(`Campo ${field.id} actualizado con valor: ${field.value}`);
|
|
} else {
|
|
this.log(`Campo ${field.id} no encontrado o sin valor`, 'warning');
|
|
}
|
|
});
|
|
}
|
|
|
|
async savesystem_config() {
|
|
this.log('Guardando configuraciones');
|
|
|
|
const system_config = {
|
|
token: document.getElementById('whatsapp-token').value,
|
|
phone_number_id: document.getElementById('phone-number-id').value,
|
|
webhook_verify_token: document.getElementById('webhook-token').value,
|
|
api_url: document.getElementById('api-url').value,
|
|
business_name: document.getElementById('business-name').value,
|
|
welcome_message: document.getElementById('welcome-message').value
|
|
};
|
|
|
|
try {
|
|
const response = await this.apiCall('manage_config.php?action=save_whatsapp', {
|
|
method: 'POST',
|
|
body: { whatsapp: system_config }
|
|
});
|
|
|
|
if (response && response.success) {
|
|
this.showSuccess('Configuraciones guardadas exitosamente');
|
|
} else {
|
|
this.showError('Error guardando configuraciones');
|
|
}
|
|
|
|
} catch (error) {
|
|
this.showError('Error: ' + error.message);
|
|
}
|
|
}
|
|
|
|
showError(message) {
|
|
this.log(`Error: ${message}`, 'error');
|
|
this.showAlert(message, 'danger');
|
|
}
|
|
|
|
showSuccess(message) {
|
|
this.log(`Success: ${message}`, 'success');
|
|
this.showAlert(message, 'success');
|
|
}
|
|
|
|
showInfo(message) {
|
|
this.log(`Info: ${message}`, 'info');
|
|
this.showAlert(message, 'info');
|
|
}
|
|
|
|
showWarning(message) {
|
|
this.log(`Warning: ${message}`, 'warning');
|
|
this.showAlert(message, 'warning');
|
|
}
|
|
|
|
showAlert(message, type) {
|
|
// Crear alerta temporal
|
|
const alertDiv = document.createElement('div');
|
|
alertDiv.className = `alert alert-${type} alert-dismissible fade show position-fixed`;
|
|
alertDiv.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
|
|
alertDiv.innerHTML = `
|
|
${message}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
`;
|
|
|
|
document.body.appendChild(alertDiv);
|
|
|
|
// Auto-remover después de 5 segundos
|
|
setTimeout(() => {
|
|
if (alertDiv.parentNode) {
|
|
alertDiv.parentNode.removeChild(alertDiv);
|
|
}
|
|
}, 5000);
|
|
}
|
|
|
|
async loadconversations() {
|
|
this.log('Cargando interfaz de mensajes');
|
|
|
|
const userSelect = document.getElementById('message-recipient');
|
|
const templateSelect = document.getElementById('message-template');
|
|
|
|
if (userSelect) userSelect.innerHTML = '<option value="">Cargando usuarios...</option>';
|
|
if (templateSelect) templateSelect.innerHTML = '<option value="">Cargando plantillas...</option>';
|
|
|
|
try {
|
|
// Cargar usuarios para el select
|
|
const usersResponse = await this.apiCall('get_users.php');
|
|
let users = [];
|
|
if (usersResponse && usersResponse.success && Array.isArray(usersResponse.data)) {
|
|
users = usersResponse.data;
|
|
} else if (Array.isArray(usersResponse)) {
|
|
users = usersResponse;
|
|
}
|
|
|
|
// Cargar plantillas para el select
|
|
const templatesResponse = await this.apiCall('get_templates.php');
|
|
let templates = [];
|
|
if (templatesResponse && templatesResponse.success && Array.isArray(templatesResponse.data)) {
|
|
templates = templatesResponse.data;
|
|
} else if (Array.isArray(templatesResponse)) {
|
|
templates = templatesResponse;
|
|
}
|
|
|
|
this.log(`Usuarios cargados: ${users.length}, Plantillas cargadas: ${templates.length}`);
|
|
|
|
if (users.length > 0) {
|
|
this.populateUsersSelect(users);
|
|
} else if (userSelect) {
|
|
userSelect.innerHTML = '<option value="">No hay usuarios</option>';
|
|
}
|
|
|
|
if (templates.length > 0) {
|
|
this.populateTemplatesSelect(templates);
|
|
} else if (templateSelect) {
|
|
templateSelect.innerHTML = '<option value="">No hay plantillas</option>';
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Error loadconversations:', error);
|
|
if (userSelect) userSelect.innerHTML = '<option value="">Error cargando usuarios</option>';
|
|
if (templateSelect) templateSelect.innerHTML = '<option value="">Error cargando plantillas</option>';
|
|
this.showError('Error cargando datos para mensajes: ' + (error.message || error));
|
|
}
|
|
}
|
|
|
|
populateUsersSelect(users) {
|
|
const select = document.getElementById('message-recipient');
|
|
if (!select) return;
|
|
|
|
// Limpiar opciones existentes (excepto la primera)
|
|
select.innerHTML = '<option value="">Seleccionar usuario...</option>';
|
|
|
|
// Agregar usuarios
|
|
users.forEach(user => {
|
|
const option = document.createElement('option');
|
|
option.value = user.id;
|
|
option.textContent = `${user.name || user.phone_number} (${user.phone_number})`;
|
|
select.appendChild(option);
|
|
});
|
|
}
|
|
|
|
populateTemplatesSelect(templates) {
|
|
const select = document.getElementById('message-template');
|
|
if (!select) return;
|
|
|
|
// Limpiar opciones existentes (excepto la primera)
|
|
select.innerHTML = '<option value="">Seleccionar plantilla...</option>';
|
|
|
|
// Agregar plantillas
|
|
templates.forEach(template => {
|
|
const option = document.createElement('option');
|
|
option.value = template.template_name;
|
|
option.textContent = `${template.name} - ${template.category || 'Sin descripción'}`;
|
|
select.appendChild(option);
|
|
});
|
|
}
|
|
|
|
async loadTemplates() {
|
|
this.log('Cargando plantillas');
|
|
|
|
try {
|
|
const response = await this.apiCall('get_templates.php');
|
|
|
|
if (response && response.success) {
|
|
this.updateTemplatesList(response.data || []);
|
|
} else {
|
|
this.showError('Error cargando plantillas');
|
|
}
|
|
|
|
} catch (error) {
|
|
this.showError('Error cargando plantillas: ' + error.message);
|
|
}
|
|
}
|
|
|
|
async loadMenus() {
|
|
this.log('Cargando menús');
|
|
|
|
try {
|
|
const response = await this.apiCall('get_menus.php');
|
|
|
|
if (response && response.success) {
|
|
this.updateMenusList(response.data || []);
|
|
} else if (response && Array.isArray(response)) {
|
|
// Retrocompatibilidad
|
|
this.updateMenusList(response);
|
|
} else {
|
|
this.showError('Error cargando menús');
|
|
}
|
|
|
|
} catch (error) {
|
|
this.showError('Error cargando menús: ' + error.message);
|
|
}
|
|
}
|
|
|
|
updateTemplatesList(templates) {
|
|
const container = document.getElementById('templates-table');
|
|
if (!container) return;
|
|
|
|
// Guardar datos para uso posterior
|
|
this.templatesData = templates;
|
|
|
|
if (templates.length === 0) {
|
|
container.innerHTML = '<tr><td colspan="6" class="text-center text-muted">No hay plantillas registradas</td></tr>';
|
|
return;
|
|
}
|
|
|
|
let html = '';
|
|
|
|
templates.forEach(template => {
|
|
html += `
|
|
<tr>
|
|
<td><strong>${template.name}</strong></td>
|
|
<td><code>${template.template_name}</code></td>
|
|
<td>${template.language_code || 'es'}</td>
|
|
<td><span class="badge bg-info">${template.category || 'utility'}</span></td>
|
|
<td><span class="badge bg-${template.status === 'approved' ? 'success' : 'warning'}">${template.status || 'pending'}</span></td>
|
|
<td>
|
|
<button class="btn btn-sm btn-outline-primary me-1" onclick="editTemplate(${template.id})">
|
|
<i class="fas fa-edit"></i>
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-danger" onclick="deleteTemplate(${template.id})">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
});
|
|
|
|
container.innerHTML = html;
|
|
}
|
|
|
|
updateMenusList(menus) {
|
|
const container = document.getElementById('menus-table');
|
|
if (!container) return;
|
|
|
|
if (menus.length === 0) {
|
|
container.innerHTML = '<tr><td colspan="7" class="text-center text-muted">No hay menús configurados</td></tr>';
|
|
return;
|
|
}
|
|
|
|
let html = '';
|
|
|
|
menus.forEach(menu => {
|
|
const createdDate = new Date(menu.created_at || Date.now());
|
|
const formatDate = createdDate.toLocaleDateString() + ' ' + createdDate.toLocaleTimeString('es', { hour: '2-digit', minute: '2-digit' });
|
|
|
|
html += `
|
|
<tr>
|
|
<td><strong>${menu.name || menu.menu_name}</strong></td>
|
|
<td><code>${menu.menu_key || menu.trigger}</code></td>
|
|
<td>${this.truncateText(menu.description || '', 50)}</td>
|
|
<td><span class="badge bg-${menu.status === 'active' ? 'success' : 'secondary'}">${menu.status || 'active'}</span></td>
|
|
<td>${menu.options_count || 0} opciones</td>
|
|
<td>${formatDate}</td>
|
|
<td>
|
|
<button class="btn btn-sm btn-outline-primary me-1" onclick="editMenu(${menu.id})" title="Editar">
|
|
<i class="fas fa-edit"></i>
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-info me-1" onclick="viewMenuOptions(${menu.id})" title="Ver opciones">
|
|
<i class="fas fa-list"></i>
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-danger" onclick="deleteMenu(${menu.id})" title="Eliminar">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
});
|
|
|
|
container.innerHTML = html;
|
|
}
|
|
|
|
async saveTemplate() {
|
|
this.log('Guardando plantilla');
|
|
|
|
try {
|
|
const templateData = {
|
|
name: document.getElementById('template-name').value,
|
|
whatsapp_name: document.getElementById('template-whatsapp-name').value,
|
|
language: document.getElementById('template-language').value,
|
|
category: document.getElementById('template-category').value
|
|
};
|
|
|
|
// Validar campos requeridos
|
|
if (!templateData.name || !templateData.whatsapp_name) {
|
|
this.showError('Nombre descriptivo y nombre de WhatsApp son requeridos');
|
|
return;
|
|
}
|
|
|
|
const response = await this.apiCall('save_template.php', {
|
|
method: 'POST',
|
|
body: templateData
|
|
});
|
|
|
|
if (response && response.success) {
|
|
const status = response.status || 'pending';
|
|
if (status === 'approved') {
|
|
this.showSuccess('Plantilla guardada y marcada como APROBADA.');
|
|
} else {
|
|
this.showSuccess('Plantilla guardada correctamente. Estado: PENDIENTE.');
|
|
}
|
|
|
|
// Cerrar modal
|
|
const modal = document.getElementById('createTemplateModal');
|
|
if (modal) {
|
|
const bsModal = bootstrap.Modal.getInstance(modal);
|
|
if (bsModal) bsModal.hide();
|
|
}
|
|
|
|
// Limpiar formulario
|
|
document.getElementById('template-form').reset();
|
|
|
|
// Recargar plantillas
|
|
this.loadTemplates();
|
|
} else {
|
|
this.showError(`Error guardando plantilla: ${response?.error || 'Error desconocido'}`);
|
|
}
|
|
|
|
} catch (error) {
|
|
this.showError('Error guardando plantilla: ' + error.message);
|
|
}
|
|
}
|
|
|
|
async saveMenu() {
|
|
this.log('Guardando menú');
|
|
|
|
try {
|
|
const menuData = {
|
|
name: document.getElementById('menu-name')?.value || '',
|
|
menu_key: document.getElementById('menu-key')?.value || '',
|
|
description: document.getElementById('menu-description')?.value || '',
|
|
welcome_message: document.getElementById('menu-welcome-message')?.value || '',
|
|
status: document.getElementById('menu-status')?.value || 'active'
|
|
};
|
|
|
|
// Validar campos requeridos
|
|
if (!menuData.name || !menuData.menu_key) {
|
|
this.showError('Nombre del menú y clave del menú son requeridos');
|
|
return;
|
|
}
|
|
|
|
// Obtener opciones del menú
|
|
const optionsContainer = document.getElementById('menu-options-container');
|
|
const options = [];
|
|
|
|
if (optionsContainer) {
|
|
const optionItems = optionsContainer.querySelectorAll('.menu-option-item');
|
|
optionItems.forEach((item, index) => {
|
|
const optionKey = item.querySelector('.option-key')?.value || '';
|
|
const optionText = item.querySelector('.option-text')?.value || '';
|
|
const optionAction = item.querySelector('.option-action')?.value || 'message';
|
|
const optionValue = item.querySelector('.option-value')?.value || '';
|
|
|
|
if (optionKey && optionText) {
|
|
options.push({
|
|
key: optionKey,
|
|
text: optionText,
|
|
action: optionAction,
|
|
value: optionValue,
|
|
order_index: index + 1
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
menuData.options = options;
|
|
|
|
this.log(`Datos del menú a guardar: ${JSON.stringify(menuData)}`);
|
|
|
|
const response = await this.apiCall('save_menu.php', {
|
|
method: 'POST',
|
|
body: menuData
|
|
});
|
|
|
|
if (response && response.success) {
|
|
this.showSuccess('Menú guardado correctamente');
|
|
|
|
// Cerrar modal
|
|
const modal = document.getElementById('createMenuModal');
|
|
if (modal) {
|
|
const bsModal = bootstrap.Modal.getInstance(modal);
|
|
if (bsModal) bsModal.hide();
|
|
}
|
|
|
|
// Limpiar formulario
|
|
const form = document.getElementById('menu-form');
|
|
if (form) form.reset();
|
|
|
|
// Limpiar opciones
|
|
const optionsContainer = document.getElementById('menu-options-container');
|
|
if (optionsContainer) optionsContainer.innerHTML = '';
|
|
|
|
// Recargar menús
|
|
this.loadMenus();
|
|
} else {
|
|
this.showError(`Error guardando menú: ${response?.error || 'Error desconocido'}`);
|
|
}
|
|
|
|
} catch (error) {
|
|
this.showError('Error guardando menú: ' + error.message);
|
|
}
|
|
}
|
|
|
|
async loadAutoResponses() {
|
|
this.log('Cargando respuestas automáticas');
|
|
|
|
try {
|
|
const response = await this.apiCall('get_autoresponses.php');
|
|
|
|
if (response && response.success) {
|
|
this.updateAutoResponsesList(response.data || []);
|
|
} else if (response && Array.isArray(response)) {
|
|
this.updateAutoResponsesList(response);
|
|
} else {
|
|
this.showError('Error cargando respuestas automáticas');
|
|
}
|
|
|
|
} catch (error) {
|
|
this.showError('Error cargando respuestas automáticas: ' + error.message);
|
|
}
|
|
}
|
|
|
|
updateAutoResponsesList(autoresponses) {
|
|
const container = document.getElementById('autoresponses-table');
|
|
if (!container) return;
|
|
|
|
// Almacenar los datos para uso posterior
|
|
this.autoResponsesData = autoresponses;
|
|
|
|
if (autoresponses.length === 0) {
|
|
container.innerHTML = '<tr><td colspan="5" class="text-center text-muted">No hay respuestas automáticas configuradas</td></tr>';
|
|
return;
|
|
}
|
|
|
|
let html = '';
|
|
|
|
autoresponses.forEach(response => {
|
|
const typeLabels = {
|
|
'keyword': '🔑 Palabra Clave',
|
|
'contains': '📝 Contiene',
|
|
'exact': '🎯 Exacta',
|
|
'welcome': '👋 Bienvenida',
|
|
'default': '🤖 Por Defecto'
|
|
};
|
|
|
|
const typeLabel = typeLabels[response.trigger_type] || response.trigger_type;
|
|
|
|
html += `
|
|
<tr>
|
|
<td><span class="badge bg-info">${typeLabel}</span></td>
|
|
<td><code>${response.trigger_value || '-'}</code></td>
|
|
<td>${this.truncateText(response.response_text || '', 60)}</td>
|
|
<td><span class="badge bg-${response.is_active == 1 ? 'success' : 'secondary'}">${response.is_active == 1 ? 'Activo' : 'Inactivo'}</span></td>
|
|
<td>
|
|
<button class="btn btn-sm btn-outline-primary me-1" onclick="editAutoResponse(${response.id})" title="Editar">
|
|
<i class="fas fa-edit"></i>
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-danger" onclick="deleteAutoResponse(${response.id})" title="Eliminar">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
});
|
|
|
|
container.innerHTML = html;
|
|
}
|
|
|
|
async saveAutoResponse() {
|
|
this.log('Guardando respuesta automática');
|
|
|
|
try {
|
|
const autoresponseId = document.getElementById('autoresponse-id')?.value || '';
|
|
|
|
const responseData = {
|
|
trigger_type: document.getElementById('autoresponse-trigger-type')?.value || 'keyword',
|
|
trigger_value: document.getElementById('autoresponse-trigger-value')?.value || '',
|
|
response_text: document.getElementById('autoresponse-text')?.value || '',
|
|
response_type: document.getElementById('autoresponse-type')?.value || 'text',
|
|
priority: document.getElementById('autoresponse-priority')?.value || 0,
|
|
template_name: document.getElementById('autoresponse-template-name')?.value || '',
|
|
menu_id: document.getElementById('autoresponse-menu-id')?.value || '',
|
|
is_active: document.getElementById('autoresponse-active')?.value === '1' ? 1 : 0
|
|
};
|
|
|
|
// Si hay ID, es una actualización
|
|
if (autoresponseId) {
|
|
responseData.id = autoresponseId;
|
|
}
|
|
|
|
// Validar campos requeridos
|
|
if (!responseData.response_text) {
|
|
this.showError('El texto de respuesta es requerido');
|
|
return;
|
|
}
|
|
|
|
if (responseData.trigger_type !== 'welcome' && responseData.trigger_type !== 'default' && !responseData.trigger_value) {
|
|
this.showError('El disparador es requerido para este tipo de respuesta');
|
|
return;
|
|
}
|
|
|
|
this.log(`Datos de respuesta automática a guardar: ${JSON.stringify(responseData)}`);
|
|
|
|
const response = await this.apiCall('save_autoresponse.php', {
|
|
method: 'POST',
|
|
body: responseData
|
|
});
|
|
|
|
if (response && response.success) {
|
|
this.showSuccess('Respuesta automática guardada correctamente');
|
|
|
|
// Cerrar modal
|
|
const modal = document.getElementById('createAutoResponseModal');
|
|
if (modal) {
|
|
const bsModal = bootstrap.Modal.getInstance(modal);
|
|
if (bsModal) bsModal.hide();
|
|
}
|
|
|
|
// Limpiar formulario
|
|
const form = document.getElementById('autoresponse-form');
|
|
if (form) form.reset();
|
|
|
|
// Recargar respuestas automáticas
|
|
this.loadAutoResponses();
|
|
} else {
|
|
this.showError(`Error guardando respuesta automática: ${response?.error || 'Error desconocido'}`);
|
|
}
|
|
|
|
} catch (error) {
|
|
this.showError('Error guardando respuesta automática: ' + error.message);
|
|
}
|
|
}
|
|
|
|
async deleteAutoResponseAction(responseId) {
|
|
this.log(`Eliminando respuesta automática ID: ${responseId}`);
|
|
|
|
try {
|
|
const response = await this.apiCall('delete_autoresponse.php', {
|
|
method: 'POST',
|
|
body: { id: responseId }
|
|
});
|
|
|
|
if (response && response.success) {
|
|
this.showSuccess('Respuesta automática eliminada correctamente');
|
|
this.loadAutoResponses(); // Recargar la lista
|
|
} else {
|
|
this.showError(`Error eliminando respuesta automática: ${response?.error || 'Error desconocido'}`);
|
|
}
|
|
} catch (error) {
|
|
this.showError('Error eliminando respuesta automática: ' + error.message);
|
|
}
|
|
}
|
|
|
|
async deleteMenuAction(menuId) {
|
|
this.log(`Eliminando menú ID: ${menuId}`);
|
|
|
|
try {
|
|
const response = await this.apiCall('delete_menu.php', {
|
|
method: 'POST',
|
|
body: { menu_id: menuId }
|
|
});
|
|
|
|
if (response && response.success) {
|
|
this.showSuccess('Menú eliminado correctamente');
|
|
this.loadMenus(); // Recargar la lista de menús
|
|
} else {
|
|
this.showError(`Error eliminando menú: ${response?.error || 'Error desconocido'}`);
|
|
}
|
|
} catch (error) {
|
|
this.showError('Error eliminando menú: ' + error.message);
|
|
}
|
|
}
|
|
|
|
async sendMessage() {
|
|
this.log('Enviando mensaje');
|
|
|
|
try {
|
|
const recipientType = document.getElementById('recipient-type').value;
|
|
const messageType = document.getElementById('message-type').value;
|
|
|
|
let recipient;
|
|
let messageData = {};
|
|
|
|
// Obtener destinatario
|
|
if (recipientType === 'existing') {
|
|
const userSelect = document.getElementById('message-recipient');
|
|
if (!userSelect.value) {
|
|
this.showError('Por favor selecciona un usuario');
|
|
return;
|
|
}
|
|
|
|
// Obtener datos del usuario seleccionado
|
|
const selectedOption = userSelect.options[userSelect.selectedIndex];
|
|
const userId = userSelect.value;
|
|
|
|
// Necesitamos obtener el número de teléfono del usuario
|
|
const usersResponse = await this.apiCall('get_users.php');
|
|
if (usersResponse && usersResponse.success) {
|
|
const user = usersResponse.data.find(u => u.id == userId);
|
|
if (user) {
|
|
recipient = user.phone_number;
|
|
} else {
|
|
this.showError('Usuario no encontrado');
|
|
return;
|
|
}
|
|
} else {
|
|
this.showError('Error obteniendo datos del usuario');
|
|
return;
|
|
}
|
|
} else {
|
|
recipient = document.getElementById('manual-recipient').value;
|
|
if (!recipient) {
|
|
this.showError('Por favor ingresa un número de teléfono');
|
|
return;
|
|
}
|
|
}
|
|
|
|
// Preparar mensaje según el tipo
|
|
if (messageType === 'text') {
|
|
const messageText = document.getElementById('message-text').value;
|
|
if (!messageText) {
|
|
this.showError('Por favor escribe un mensaje');
|
|
return;
|
|
}
|
|
|
|
messageData = {
|
|
recipient: recipient,
|
|
type: 'text',
|
|
message: messageText
|
|
};
|
|
} else {
|
|
const templateSelect = document.getElementById('message-template');
|
|
if (!templateSelect.value) {
|
|
this.showError('Por favor selecciona una plantilla');
|
|
return;
|
|
}
|
|
|
|
messageData = {
|
|
recipient: recipient,
|
|
type: 'template',
|
|
template_name: templateSelect.value
|
|
};
|
|
}
|
|
|
|
this.log(`Enviando mensaje a ${recipient}: ${JSON.stringify(messageData)}`);
|
|
|
|
// Preguntar al usuario si quiere envío real o simulado
|
|
const sendReal = confirm('¿Enviar mensaje REAL por WhatsApp?\n\nSí = Envío real\nNo = Envío simulado (debug)');
|
|
|
|
// Enviar mensaje
|
|
const response = sendReal
|
|
? await this.apiCallReal('send_message.php', {
|
|
method: 'POST',
|
|
body: messageData
|
|
})
|
|
: await this.apiCall('send_message.php', {
|
|
method: 'POST',
|
|
body: messageData
|
|
});
|
|
|
|
if (response && response.success) {
|
|
this.showSuccess(`Mensaje enviado correctamente a ${recipient}`);
|
|
|
|
// Limpiar formulario
|
|
document.getElementById('send-message-form').reset();
|
|
document.getElementById('message-recipient').value = '';
|
|
} else {
|
|
this.showError(`Error enviando mensaje: ${response?.error || 'Error desconocido'}`);
|
|
}
|
|
|
|
} catch (error) {
|
|
this.showError('Error enviando mensaje: ' + error.message);
|
|
}
|
|
}
|
|
async loadLogs() {
|
|
try {
|
|
const response = await this.apiCall('get_logs.php');
|
|
if (response && response.success && Array.isArray(response.data)) {
|
|
this.updateLogsTable(response.data);
|
|
} else if (response && Array.isArray(response)) {
|
|
// Retrocompatibilidad por si la API devuelve directamente el array
|
|
this.updateLogsTable(response);
|
|
} else {
|
|
this.showError('Error: formato de datos inválido para logs');
|
|
}
|
|
} catch (error) {
|
|
this.showError('Error cargando logs: ' + error.message);
|
|
}
|
|
}
|
|
|
|
updateLogsTable(logs) {
|
|
const tbody = document.getElementById('logs-table');
|
|
if (!tbody) {
|
|
this.log('Tabla de logs no encontrada', 'warning');
|
|
return;
|
|
}
|
|
|
|
tbody.innerHTML = '';
|
|
|
|
if (!logs || logs.length === 0) {
|
|
tbody.innerHTML = '<tr><td colspan="5" class="text-center text-muted">No hay logs registrados</td></tr>';
|
|
return;
|
|
}
|
|
|
|
logs.forEach(log => {
|
|
const row = this.createLogRow(log);
|
|
if (row) {
|
|
tbody.appendChild(row);
|
|
}
|
|
});
|
|
}
|
|
|
|
createLogRow(log) {
|
|
if (!log) return null;
|
|
|
|
const tr = document.createElement('tr');
|
|
|
|
// Fecha y hora
|
|
const tdDateTime = document.createElement('td');
|
|
tdDateTime.textContent = log.datetime || log.created_at || 'N/A';
|
|
tr.appendChild(tdDateTime);
|
|
|
|
// Nivel
|
|
const tdLevel = document.createElement('td');
|
|
const levelBadge = document.createElement('span');
|
|
levelBadge.className = `badge bg-${this.getLevelBadgeClass(log.level || log.tipo)}`;
|
|
levelBadge.textContent = (log.level || log.tipo || 'INFO').toUpperCase();
|
|
tdLevel.appendChild(levelBadge);
|
|
tr.appendChild(tdLevel);
|
|
|
|
// Mensaje
|
|
const tdMessage = document.createElement('td');
|
|
tdMessage.textContent = this.truncateText(log.message || log.mensaje || '', 100);
|
|
tr.appendChild(tdMessage);
|
|
|
|
// Origen
|
|
const tdSource = document.createElement('td');
|
|
tdSource.textContent = log.source || log.origen || 'Sistema';
|
|
tr.appendChild(tdSource);
|
|
|
|
// Acciones
|
|
const tdActions = document.createElement('td');
|
|
const viewButton = document.createElement('button');
|
|
viewButton.className = 'btn btn-sm btn-outline-info';
|
|
viewButton.innerHTML = '<i class="fas fa-eye"></i>';
|
|
viewButton.onclick = () => this.showLogDetails(log);
|
|
tdActions.appendChild(viewButton);
|
|
tr.appendChild(tdActions);
|
|
|
|
return tr;
|
|
}
|
|
|
|
getLevelBadgeClass(level) {
|
|
const levelClasses = {
|
|
'ERROR': 'danger',
|
|
'WARNING': 'warning',
|
|
'WARN': 'warning',
|
|
'INFO': 'info',
|
|
'DEBUG': 'secondary',
|
|
'SUCCESS': 'success'
|
|
};
|
|
return levelClasses[level?.toUpperCase()] || 'secondary';
|
|
}
|
|
|
|
showLogDetails(log) {
|
|
const details = {
|
|
'Fecha/Hora': log.datetime || log.created_at || 'N/A',
|
|
'Nivel': (log.level || log.tipo || 'INFO').toUpperCase(),
|
|
'Mensaje': log.message || log.mensaje || '',
|
|
'Origen': log.source || log.origen || 'Sistema',
|
|
'Datos Adicionales': log.data ? JSON.stringify(log.data, null, 2) : 'N/A'
|
|
};
|
|
|
|
let detailsHtml = '<div class="log-details">';
|
|
for (const [key, value] of Object.entries(details)) {
|
|
detailsHtml += `
|
|
<div class="mb-2">
|
|
<strong>${key}:</strong>
|
|
<div class="ms-2 ${key === 'Datos Adicionales' ? 'font-monospace' : ''}">${value}</div>
|
|
</div>`;
|
|
}
|
|
detailsHtml += '</div>';
|
|
|
|
// Mostrar en modal o alert
|
|
if (typeof bootstrap !== 'undefined') {
|
|
// Si Bootstrap está disponible, crear modal
|
|
this.showModalAlert('Detalles del Log', detailsHtml);
|
|
} else {
|
|
// Fallback a alert simple
|
|
alert(`Detalles del Log:\n\n${Object.entries(details).map(([k,v]) => `${k}: ${v}`).join('\n')}`);
|
|
}
|
|
}
|
|
|
|
showModalAlert(title, content) {
|
|
// Crear modal temporal si no existe
|
|
let modal = document.getElementById('tempLogModal');
|
|
if (!modal) {
|
|
modal = document.createElement('div');
|
|
modal.id = 'tempLogModal';
|
|
modal.className = 'modal fade';
|
|
modal.innerHTML = `
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title"></h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body"></div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
document.body.appendChild(modal);
|
|
}
|
|
|
|
modal.querySelector('.modal-title').textContent = title;
|
|
modal.querySelector('.modal-body').innerHTML = content;
|
|
|
|
const bootstrapModal = new bootstrap.Modal(modal);
|
|
bootstrapModal.show();
|
|
}
|
|
|
|
async deleteUserAction(userId, userName, userPhone) {
|
|
if (!confirm(`¿Estás seguro de que quieres eliminar este usuario?\n\nUsuario: ${userName}\nTeléfono: ${userPhone}\n\nEsta acción no se puede deshacer y eliminará:\n• Todos sus mensajes\n• Su historial de conversación\n• Sus datos personales`)) {
|
|
return;
|
|
}
|
|
|
|
this.log(`Eliminando usuario ID: ${userId}`);
|
|
|
|
try {
|
|
const response = await this.apiCall('delete_user.php', {
|
|
method: 'POST',
|
|
body: { id: userId }
|
|
});
|
|
|
|
if (response && response.success) {
|
|
this.showSuccess('Usuario eliminado correctamente');
|
|
this.loadUsers(); // Recargar la lista
|
|
} else {
|
|
this.showError(`Error eliminando usuario: ${response?.error || 'Error desconocido'}`);
|
|
}
|
|
} catch (error) {
|
|
this.showError('Error eliminando usuario: ' + error.message);
|
|
}
|
|
}
|
|
|
|
async deleteTemplateAction(templateId) {
|
|
this.log(`Eliminando plantilla ID: ${templateId}`);
|
|
|
|
try {
|
|
const response = await this.apiCall('delete_template.php', {
|
|
method: 'POST',
|
|
body: { id: templateId }
|
|
});
|
|
|
|
if (response && response.success) {
|
|
this.showSuccess('Plantilla eliminada correctamente');
|
|
this.loadTemplates(); // Recargar la lista
|
|
} else {
|
|
this.showError(`Error eliminando plantilla: ${response?.error || 'Error desconocido'}`);
|
|
}
|
|
} catch (error) {
|
|
this.showError('Error eliminando plantilla: ' + error.message);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Inicializar cuando el DOM esté listo
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
console.log('DOM cargado, inicializando WhatsApp Manager...');
|
|
|
|
try {
|
|
window.whatsappManager = new SimpleWhatsAppManager();
|
|
console.log('WhatsApp Manager inicializado correctamente');
|
|
} catch (error) {
|
|
console.error('Error inicializando WhatsApp Manager:', error);
|
|
}
|
|
});
|
|
|
|
// Funciones globales para modales (compatibilidad con el HTML existente)
|
|
window.openCreateTemplateModal = function () {
|
|
console.log('🔵 Abriendo modal de plantilla...');
|
|
|
|
const modalElement = document.getElementById('createTemplateModal');
|
|
if (!modalElement) {
|
|
console.error('❌ Modal de plantilla no encontrado');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const form = document.getElementById('template-form');
|
|
if (form) form.reset();
|
|
|
|
if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
|
|
const modal = new bootstrap.Modal(modalElement);
|
|
modal.show();
|
|
} else {
|
|
modalElement.style.display = 'block';
|
|
modalElement.classList.add('show');
|
|
}
|
|
console.log('✅ Modal de plantilla abierto');
|
|
} catch (error) {
|
|
console.error('❌ Error abriendo modal de plantilla:', error);
|
|
}
|
|
};
|
|
|
|
window.openCreateMenuModal = function () {
|
|
console.log('🔵 Abriendo modal de menú...');
|
|
|
|
const modalElement = document.getElementById('createMenuModal');
|
|
if (!modalElement) {
|
|
console.error('❌ Modal de menú no encontrado');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const form = document.getElementById('menu-form');
|
|
if (form) form.reset();
|
|
|
|
if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
|
|
const modal = new bootstrap.Modal(modalElement);
|
|
modal.show();
|
|
} else {
|
|
modalElement.style.display = 'block';
|
|
modalElement.classList.add('show');
|
|
}
|
|
console.log('✅ Modal de menú abierto');
|
|
} catch (error) {
|
|
console.error('❌ Error abriendo modal de menú:', error);
|
|
}
|
|
};
|
|
|
|
// Función global para debugging
|
|
window.debugAPI = async function (endpoint) {
|
|
try {
|
|
const manager = window.whatsappManager;
|
|
if (manager) {
|
|
const result = await manager.apiCall(endpoint);
|
|
console.log('Debug API Result:', result);
|
|
return result;
|
|
} else {
|
|
console.error('Manager no inicializado');
|
|
}
|
|
} catch (error) {
|
|
console.error('Debug API Error:', error);
|
|
}
|
|
};
|
|
|
|
// Función para abrir ventana de chat
|
|
window.openChatWindow = function (userId) {
|
|
console.log('Abriendo chat del usuario:', userId);
|
|
|
|
// Abrir nueva ventana de chat
|
|
const chatUrl = `chat_window.php?user_id=${userId}&debug=true`;
|
|
const windowFeatures = 'width=1000,height=700,resizable=yes,scrollbars=yes,status=yes,toolbar=no,menubar=no,location=no';
|
|
|
|
const chatWindow = window.open(chatUrl, `chat_${userId}`, windowFeatures);
|
|
|
|
if (chatWindow) {
|
|
chatWindow.focus();
|
|
} else {
|
|
alert('No se pudo abrir la ventana de chat. Verifica que tu navegador permita ventanas emergentes.');
|
|
}
|
|
};
|
|
|
|
// Función para mostrar modal de chat
|
|
function showChatModal(user, conversations) {
|
|
// Escapar datos del usuario para evitar XSS
|
|
const userName = escapeHtml(user.name || 'Usuario');
|
|
const userPhone = escapeHtml(user.phone_number || '');
|
|
|
|
const modalHtml = `
|
|
<div class="modal fade" id="chatModal" tabindex="-1" aria-labelledby="chatModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-success text-white">
|
|
<h5 class="modal-title" id="chatModalLabel">
|
|
<i class="fab fa-whatsapp"></i> ${userName}
|
|
<small class="opacity-75">(${userPhone})</small>
|
|
</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body p-0">
|
|
<div id="chat-conversations" class="chat-container" style="height: 400px; overflow-y: auto; padding: 15px; background-color: #e5ddd5;">
|
|
${generateChatconversations(conversations)}
|
|
</div>
|
|
<div class="border-top p-3">
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="input-group">
|
|
<select id="messageType" class="form-select" style="max-width: 120px;">
|
|
<option value="text">Texto</option>
|
|
<option value="template">Plantilla</option>
|
|
</select>
|
|
<input type="text" id="messageInput" class="form-control" placeholder="Escribe tu mensaje...">
|
|
<button class="btn btn-success" onclick="sendChatMessage(${user.id})">
|
|
<i class="fas fa-paper-plane"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="templateSelector" class="mt-2" style="display: none;">
|
|
<select id="templateSelect" class="form-select">
|
|
<option value="">Selecciona una plantilla...</option>
|
|
<option value="hello_world">hello_world</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// Remover modal anterior si existe
|
|
const existingModal = document.getElementById('chatModal');
|
|
if (existingModal) {
|
|
existingModal.remove();
|
|
}
|
|
|
|
document.body.insertAdjacentHTML('beforeend', modalHtml);
|
|
|
|
// Event listener para cambio de tipo de mensaje
|
|
document.getElementById('messageType').addEventListener('change', function() {
|
|
const templateSelector = document.getElementById('templateSelector');
|
|
const messageInput = document.getElementById('messageInput');
|
|
|
|
if (this.value === 'template') {
|
|
templateSelector.style.display = 'block';
|
|
messageInput.placeholder = 'Parámetros de la plantilla (opcional)';
|
|
} else {
|
|
templateSelector.style.display = 'none';
|
|
messageInput.placeholder = 'Escribe tu mensaje...';
|
|
}
|
|
});
|
|
|
|
// Mostrar modal
|
|
const modal = new bootstrap.Modal(document.getElementById('chatModal'));
|
|
modal.show();
|
|
|
|
// Scroll al final
|
|
setTimeout(() => {
|
|
const chatContainer = document.getElementById('chat-conversations');
|
|
chatContainer.scrollTop = chatContainer.scrollHeight;
|
|
}, 200);
|
|
}
|
|
|
|
// Generar HTML de mensajes del chat
|
|
function generateChatconversations(conversations) {
|
|
if (!conversations || conversations.length === 0) {
|
|
return '<div class="text-center text-muted py-4"><i class="fas fa-comments fa-3x"></i><br><br>No hay mensajes en esta conversación</div>';
|
|
}
|
|
|
|
let html = '';
|
|
conversations.forEach(msg => {
|
|
const isOutgoing = msg.direction === 'outgoing';
|
|
const messageClass = isOutgoing ? 'outgoing' : 'incoming';
|
|
const alignClass = isOutgoing ? 'justify-content-end' : 'justify-content-start';
|
|
const bgClass = isOutgoing ? 'bg-success text-white' : 'bg-white';
|
|
|
|
// Escapar el contenido del mensaje
|
|
const messageContent = escapeHtml(msg.content) || '<em>Sin contenido</em>';
|
|
const messageTime = escapeHtml(msg.time || '');
|
|
|
|
html += `
|
|
<div class="d-flex ${alignClass} mb-2">
|
|
<div class="message-bubble ${bgClass} rounded-3 p-2 shadow-sm" style="max-width: 70%;">
|
|
<div class="message-content">
|
|
${messageContent}
|
|
</div>
|
|
<div class="message-time text-${isOutgoing ? 'light' : 'muted'}" style="font-size: 0.75rem;">
|
|
${messageTime} ${isOutgoing ? '✓✓' : ''}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
return html;
|
|
}
|
|
|
|
// Función para escapar HTML y prevenir XSS
|
|
function escapeHtml(text) {
|
|
if (!text) return '';
|
|
const map = {
|
|
'&': '&',
|
|
'<': '<',
|
|
'>': '>',
|
|
'"': '"',
|
|
"'": '''
|
|
};
|
|
return text.toString().replace(/[&<>"']/g, function(m) { return map[m]; });
|
|
}
|
|
|
|
// Función para enviar mensaje desde el chat
|
|
window.sendChatMessage = async function (userId) {
|
|
const messageType = document.getElementById('messageType').value;
|
|
const messageInput = document.getElementById('messageInput');
|
|
const message = messageInput.value.trim();
|
|
|
|
if (!message && messageType === 'text') {
|
|
alert('Por favor escribe un mensaje');
|
|
return;
|
|
}
|
|
|
|
if (messageType === 'template') {
|
|
const templateSelect = document.getElementById('templateSelect');
|
|
const template = templateSelect.value;
|
|
|
|
if (!template) {
|
|
alert('Por favor selecciona una plantilla');
|
|
return;
|
|
}
|
|
|
|
await sendTemplateMessage(userId, template, message);
|
|
} else {
|
|
await sendTextMessage(userId, message);
|
|
}
|
|
|
|
messageInput.value = '';
|
|
};
|
|
|
|
// Función para enviar mensaje de texto
|
|
async function sendTextMessage(userId, message) {
|
|
try {
|
|
const manager = window.whatsappManager;
|
|
const usersResponse = await manager.apiCall('get_users.php?debug=true');
|
|
|
|
// Manejar diferentes formatos de respuesta
|
|
let users = [];
|
|
if (Array.isArray(usersResponse)) {
|
|
users = usersResponse;
|
|
} else if (usersResponse && usersResponse.data && Array.isArray(usersResponse.data)) {
|
|
users = usersResponse.data;
|
|
} else if (usersResponse && usersResponse.users && Array.isArray(usersResponse.users)) {
|
|
users = usersResponse.users;
|
|
} else {
|
|
console.error('Formato de respuesta de usuarios inesperado:', usersResponse);
|
|
throw new Error('Error obteniendo lista de usuarios');
|
|
}
|
|
|
|
const user = users.find(u => u.id == userId);
|
|
|
|
if (!user) {
|
|
throw new Error('Usuario no encontrado');
|
|
}
|
|
|
|
const response = await manager.apiCall('send_message.php', {
|
|
method: 'POST',
|
|
body: {
|
|
recipient: user.phone_number,
|
|
type: 'text',
|
|
message: message
|
|
}
|
|
});
|
|
|
|
if (response && response.success) {
|
|
// Refrescar chat
|
|
openChatWindow(userId);
|
|
showAlert('Mensaje enviado correctamente', 'success');
|
|
} else {
|
|
throw new Error(response.error || 'Error enviando mensaje');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error enviando mensaje:', error);
|
|
showAlert('Error enviando mensaje: ' + error.message, 'danger');
|
|
}
|
|
}
|
|
|
|
// Función para enviar mensaje de plantilla
|
|
async function sendTemplateMessage(userId, template, parameters) {
|
|
try {
|
|
const manager = window.whatsappManager;
|
|
const usersResponse = await manager.apiCall('get_users.php?debug=true');
|
|
|
|
// Manejar diferentes formatos de respuesta
|
|
let users = [];
|
|
if (Array.isArray(usersResponse)) {
|
|
users = usersResponse;
|
|
} else if (usersResponse && usersResponse.data && Array.isArray(usersResponse.data)) {
|
|
users = usersResponse.data;
|
|
} else if (usersResponse && usersResponse.users && Array.isArray(usersResponse.users)) {
|
|
users = usersResponse.users;
|
|
} else {
|
|
console.error('Formato de respuesta de usuarios inesperado:', usersResponse);
|
|
throw new Error('Error obteniendo lista de usuarios');
|
|
}
|
|
|
|
const user = users.find(u => u.id == userId);
|
|
|
|
if (!user) {
|
|
throw new Error('Usuario no encontrado');
|
|
}
|
|
|
|
const response = await manager.apiCall('send_message.php', {
|
|
method: 'POST',
|
|
body: {
|
|
recipient: user.phone_number,
|
|
type: 'template',
|
|
template: template,
|
|
language: 'en_US',
|
|
parameters: parameters ? parameters.split(',') : []
|
|
}
|
|
});
|
|
|
|
if (response && response.success) {
|
|
// Refrescar chat
|
|
openChatWindow(userId);
|
|
showAlert('Mensaje de plantilla enviado correctamente', 'success');
|
|
} else {
|
|
throw new Error(response.error || 'Error enviando plantilla');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error enviando plantilla:', error);
|
|
showAlert('Error enviando plantilla: ' + error.message, 'danger');
|
|
}
|
|
}
|
|
|
|
// Función para ver detalles de conversación
|
|
window.viewConversationDetails = async function (userId) {
|
|
console.log('Mostrando detalles de conversación para usuario:', userId);
|
|
|
|
try {
|
|
// Obtener datos del usuario
|
|
const usersResponse = await window.whatsappManager.apiCall('get_users.php');
|
|
let user = null;
|
|
|
|
if (usersResponse && usersResponse.success && Array.isArray(usersResponse.data)) {
|
|
user = usersResponse.data.find(u => u.id == userId);
|
|
}
|
|
|
|
if (!user) {
|
|
window.whatsappManager.showError('Usuario no encontrado');
|
|
return;
|
|
}
|
|
|
|
// Obtener estadísticas de la conversación (simuladas por ahora)
|
|
const stats = {
|
|
total_conversations: Math.floor(Math.random() * 50) + 1,
|
|
conversations_today: Math.floor(Math.random() * 10),
|
|
last_activity: user.updated_at || user.created_at,
|
|
first_contact: user.created_at,
|
|
status: user.status || 'active'
|
|
};
|
|
|
|
// Mostrar modal con detalles
|
|
showConversationDetailsModal(user, stats);
|
|
|
|
} catch (error) {
|
|
console.error('Error obteniendo detalles de conversación:', error);
|
|
window.whatsappManager.showError('Error obteniendo detalles: ' + error.message);
|
|
}
|
|
};
|
|
|
|
// Función para mostrar modal de detalles de conversación
|
|
function showConversationDetailsModal(user, stats) {
|
|
console.log('Mostrando modal de detalles para:', user);
|
|
|
|
const userName = escapeHtml(user.name || 'Sin nombre');
|
|
const userPhone = escapeHtml(user.phone_number || '');
|
|
const userStatus = user.status || 'unknown';
|
|
const currentMenu = user.current_menu || 'Sin menú';
|
|
|
|
// Formatear fechas
|
|
const firstContact = user.created_at ? new Date(user.created_at).toLocaleString('es') : 'N/A';
|
|
const lastActivity = stats.last_activity ? new Date(stats.last_activity).toLocaleString('es') : 'N/A';
|
|
|
|
const statusBadgeClass = userStatus === 'active' ? 'success' : userStatus === 'inactive' ? 'secondary' : 'warning';
|
|
|
|
const modalHtml = `
|
|
<div class="modal fade" id="conversationDetailsModal" tabindex="-1" aria-labelledby="conversationDetailsModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-info text-white">
|
|
<h5 class="modal-title" id="conversationDetailsModalLabel">
|
|
<i class="fas fa-info-circle"></i> Detalles de Conversación
|
|
</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h6 class="text-muted mb-3"><i class="fas fa-user"></i> Información del Usuario</h6>
|
|
<div class="mb-3">
|
|
<strong>ID:</strong> ${user.id}
|
|
</div>
|
|
<div class="mb-3">
|
|
<strong>Nombre:</strong> ${userName}
|
|
</div>
|
|
<div class="mb-3">
|
|
<strong>Teléfono:</strong> ${userPhone}
|
|
</div>
|
|
<div class="mb-3">
|
|
<strong>Estado:</strong>
|
|
<span class="badge bg-${statusBadgeClass}">${userStatus.toUpperCase()}</span>
|
|
</div>
|
|
<div class="mb-3">
|
|
<strong>Menú Actual:</strong> ${currentMenu}
|
|
</div>
|
|
<div class="mb-3">
|
|
<strong>Primer Contacto:</strong><br>
|
|
<small class="text-muted">${firstContact}</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6 class="text-muted mb-3"><i class="fas fa-chart-line"></i> Estadísticas de Conversación</h6>
|
|
<div class="mb-3">
|
|
<strong>Total de Mensajes:</strong>
|
|
<span class="badge bg-primary">${stats.total_conversations || 0}</span>
|
|
</div>
|
|
<div class="mb-3">
|
|
<strong>Mensajes Hoy:</strong>
|
|
<span class="badge bg-success">${stats.conversations_today || 0}</span>
|
|
</div>
|
|
<div class="mb-3">
|
|
<strong>Última Actividad:</strong><br>
|
|
<small class="text-muted">${lastActivity}</small>
|
|
</div>
|
|
<div class="mb-3">
|
|
<strong>Tiempo desde último mensaje:</strong><br>
|
|
<small class="text-muted">${calculateTimeAgo(stats.last_activity)}</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<h6 class="text-muted mb-3"><i class="fas fa-cogs"></i> Acciones Rápidas</h6>
|
|
<div class="d-flex gap-2 flex-wrap">
|
|
<button class="btn btn-success btn-sm" onclick="openChatWindow(${user.id}); bootstrap.Modal.getInstance(document.getElementById('conversationDetailsModal')).hide();">
|
|
<i class="fas fa-comments"></i> Abrir Chat
|
|
</button>
|
|
<button class="btn btn-warning btn-sm" onclick="editUser(${user.id})">
|
|
<i class="fas fa-edit"></i> Editar Usuario
|
|
</button>
|
|
<button class="btn btn-info btn-sm" onclick="viewUserHistory(${user.id})">
|
|
<i class="fas fa-history"></i> Ver Historial
|
|
</button>
|
|
<button class="btn btn-danger btn-sm" onclick="confirmDeleteUser(${user.id})">
|
|
<i class="fas fa-trash"></i> Eliminar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// Remover modal anterior si existe
|
|
const existingModal = document.getElementById('conversationDetailsModal');
|
|
if (existingModal) {
|
|
existingModal.remove();
|
|
}
|
|
|
|
document.body.insertAdjacentHTML('beforeend', modalHtml);
|
|
|
|
// Mostrar modal
|
|
const modal = new bootstrap.Modal(document.getElementById('conversationDetailsModal'));
|
|
modal.show();
|
|
}
|
|
|
|
// Función auxiliar para calcular tiempo transcurrido
|
|
function calculateTimeAgo(datetime) {
|
|
if (!datetime) return 'N/A';
|
|
|
|
const now = new Date();
|
|
const date = new Date(datetime);
|
|
const diffInSeconds = Math.floor((now - date) / 1000);
|
|
|
|
if (diffInSeconds < 60) return 'Hace menos de 1 minuto';
|
|
if (diffInSeconds < 3600) return `Hace ${Math.floor(diffInSeconds / 60)} minutos`;
|
|
if (diffInSeconds < 86400) return `Hace ${Math.floor(diffInSeconds / 3600)} horas`;
|
|
if (diffInSeconds < 2592000) return `Hace ${Math.floor(diffInSeconds / 86400)} días`;
|
|
|
|
return date.toLocaleDateString('es');
|
|
}
|
|
|
|
// Función para mostrar alertas
|
|
function showAlert(message, type = 'info') {
|
|
const alertHtml = `
|
|
<div class="alert alert-${type} alert-dismissible fade show position-fixed" style="top: 20px; right: 20px; z-index: 9999;" role="alert">
|
|
${message}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</div>
|
|
`;
|
|
|
|
document.body.insertAdjacentHTML('beforeend', alertHtml);
|
|
|
|
// Auto-dismiss después de 5 segundos
|
|
setTimeout(() => {
|
|
const alert = document.querySelector('.alert');
|
|
if (alert) {
|
|
alert.remove();
|
|
}
|
|
}, 5000);
|
|
}
|
|
|
|
// Función para ver conversación específica (mantener compatibilidad)
|
|
window.viewConversation = function (userId) {
|
|
openChatWindow(userId);
|
|
};
|
|
|
|
// Función para editar usuario
|
|
window.editUser = function (userId) {
|
|
console.log('Editando usuario:', userId);
|
|
|
|
// Buscar el usuario en los datos cargados
|
|
if (window.whatsappManager && window.whatsappManager.usersData) {
|
|
const user = window.whatsappManager.usersData.find(u => u.id == userId);
|
|
if (user) {
|
|
showEditUserModal(user);
|
|
} else {
|
|
alert('Error: Usuario no encontrado');
|
|
}
|
|
} else {
|
|
alert('Error: Datos no disponibles, recarga la página');
|
|
}
|
|
};
|
|
|
|
// Función para ver historial de usuario
|
|
window.viewUserHistory = function (userId) {
|
|
console.log('Viendo historial del usuario:', userId);
|
|
|
|
// Por ahora mostrar un modal simple
|
|
const modalHtml = `
|
|
<div class="modal fade" id="userHistoryModal" tabindex="-1">
|
|
<div class="modal-dialog modal-xl">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-primary text-white">
|
|
<h5 class="modal-title">
|
|
<i class="fas fa-history"></i> Historial del Usuario
|
|
</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="text-center py-4">
|
|
<i class="fas fa-history fa-3x text-muted mb-3"></i>
|
|
<h5>Historial de Usuario</h5>
|
|
<p class="text-muted">Para ver el historial completo de conversaciones, usa la pestaña <strong>"Conversaciones"</strong> en el menú principal.<br>
|
|
Allí podrás ver todos los mensajes y el historial detallado de cada usuario.</p>
|
|
<a href="#" onclick="window.whatsappManager.showTab('conversations'); bootstrap.Modal.getInstance(document.getElementById('userHistoryModal')).hide(); return false;" class="btn btn-primary mt-3">
|
|
<i class="fas fa-comments"></i> Ir a Conversaciones
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// Remover modal anterior
|
|
const existing = document.getElementById('userHistoryModal');
|
|
if (existing) existing.remove();
|
|
|
|
document.body.insertAdjacentHTML('beforeend', modalHtml);
|
|
const modal = new bootstrap.Modal(document.getElementById('userHistoryModal'));
|
|
modal.show();
|
|
};
|
|
|
|
// Función para confirmar eliminación de usuario
|
|
window.confirmDeleteUser = function (userId) {
|
|
if (confirm('¿Estás seguro de que deseas eliminar este usuario?\n\nEsta acción no se puede deshacer.')) {
|
|
deleteUser(userId);
|
|
}
|
|
};
|
|
|
|
// Función para eliminar usuario
|
|
window.deleteUser = async function (userId) {
|
|
console.log('Eliminando usuario:', userId);
|
|
|
|
try {
|
|
const response = await window.whatsappManager.apiCall('delete_user.php', {
|
|
method: 'POST',
|
|
body: { user_id: userId }
|
|
});
|
|
|
|
if (response && response.success) {
|
|
window.whatsappManager.showSuccess('Usuario eliminado correctamente');
|
|
|
|
// Cerrar modal si está abierto
|
|
const modal = document.getElementById('conversationDetailsModal');
|
|
if (modal) {
|
|
const bsModal = bootstrap.Modal.getInstance(modal);
|
|
if (bsModal) bsModal.hide();
|
|
}
|
|
|
|
// Recargar datos
|
|
if (window.whatsappManager.currentTab === 'users') {
|
|
window.whatsappManager.loadUsers();
|
|
} else if (window.whatsappManager.currentTab === 'conversations') {
|
|
window.whatsappManager.loadConversations();
|
|
}
|
|
} else {
|
|
window.whatsappManager.showError('Error eliminando usuario: ' + (response?.error || 'Error desconocido'));
|
|
}
|
|
} catch (error) {
|
|
window.whatsappManager.showError('Error eliminando usuario: ' + error.message);
|
|
}
|
|
};
|
|
|
|
// Función para eliminar usuario
|
|
window.deleteUser = function (userId) {
|
|
console.log('Eliminando usuario:', userId);
|
|
|
|
// Buscar el usuario para mostrar información
|
|
let userName = 'Usuario ' + userId;
|
|
let userPhone = '';
|
|
|
|
if (window.whatsappManager && window.whatsappManager.usersData) {
|
|
const user = window.whatsappManager.usersData.find(u => u.id == userId);
|
|
if (user) {
|
|
userName = user.name || 'Usuario ' + userId;
|
|
userPhone = user.phone_number || '';
|
|
}
|
|
}
|
|
|
|
if (window.whatsappManager) {
|
|
window.whatsappManager.deleteUserAction(userId, userName, userPhone);
|
|
}
|
|
};
|
|
|
|
// Funciones para plantillas
|
|
window.showCreateTemplateModal = function () {
|
|
const modal = new bootstrap.Modal(document.getElementById('createTemplateModal'));
|
|
modal.show();
|
|
};
|
|
|
|
window.editTemplate = function (templateId) {
|
|
console.log('Editando plantilla:', templateId);
|
|
|
|
// Las plantillas de WhatsApp no se pueden editar una vez creadas
|
|
// Solo se pueden crear nuevas o eliminar existentes
|
|
if (window.whatsappManager) {
|
|
window.whatsappManager.showInfo(
|
|
'Las plantillas de WhatsApp aprobadas no se pueden editar una vez creadas. ' +
|
|
'Si necesitas cambiar el contenido, debes crear una nueva plantilla y enviarla a revisión.'
|
|
);
|
|
} else {
|
|
alert('Las plantillas no se pueden editar. Crea una nueva plantilla si necesitas modificar el contenido.');
|
|
}
|
|
};
|
|
|
|
window.deleteTemplate = function (templateId) {
|
|
console.log('Eliminando plantilla:', templateId);
|
|
|
|
// Buscar la plantilla para mostrar información
|
|
let templateName = 'Plantilla ' + templateId;
|
|
|
|
if (window.whatsappManager && window.whatsappManager.templatesData) {
|
|
const template = window.whatsappManager.templatesData.find(t => t.id == templateId);
|
|
if (template) {
|
|
templateName = template.name || 'Plantilla ' + templateId;
|
|
}
|
|
}
|
|
|
|
if (confirm(`¿Está seguro que desea eliminar la plantilla "${templateName}"?\n\nEsta acción no se puede deshacer.`)) {
|
|
if (window.whatsappManager) {
|
|
window.whatsappManager.deleteTemplateAction(templateId);
|
|
}
|
|
}
|
|
};
|
|
|
|
// Función para editar usuario - Modal simple
|
|
window.showEditUserModal = function(user) {
|
|
const modalHtml = `
|
|
<div class="modal fade" id="editUserModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-primary text-white">
|
|
<h5 class="modal-title">
|
|
<i class="fas fa-user-edit"></i> Editar Usuario
|
|
</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="edit-user-form">
|
|
<input type="hidden" id="edit-user-id" value="${user.id}">
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Teléfono</label>
|
|
<input type="text" class="form-control" value="${user.phone_number}" readonly>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Nombre</label>
|
|
<input type="text" class="form-control" id="edit-user-name" value="${user.name || ''}" placeholder="Nombre del usuario">
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Estado</label>
|
|
<select class="form-control" id="edit-user-status">
|
|
<option value="active" ${user.status === 'active' ? 'selected' : ''}>Activo</option>
|
|
<option value="inactive" ${user.status === 'inactive' ? 'selected' : ''}>Inactivo</option>
|
|
<option value="blocked" ${user.status === 'blocked' ? 'selected' : ''}>Bloqueado</option>
|
|
</select>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
|
|
<button type="button" class="btn btn-primary" onclick="saveEditedUser()">
|
|
<i class="fas fa-save"></i> Guardar Cambios
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// Eliminar modal anterior si existe
|
|
const existingModal = document.getElementById('editUserModal');
|
|
if (existingModal) {
|
|
existingModal.remove();
|
|
}
|
|
|
|
// Agregar nuevo modal
|
|
document.body.insertAdjacentHTML('beforeend', modalHtml);
|
|
|
|
// Mostrar modal
|
|
const modal = new bootstrap.Modal(document.getElementById('editUserModal'));
|
|
modal.show();
|
|
};
|
|
|
|
// Función para guardar usuario editado
|
|
window.saveEditedUser = async function() {
|
|
const userId = document.getElementById('edit-user-id').value;
|
|
const name = document.getElementById('edit-user-name').value;
|
|
const status = document.getElementById('edit-user-status').value;
|
|
|
|
if (window.whatsappManager) {
|
|
try {
|
|
const response = await window.whatsappManager.apiCall('update_user.php', {
|
|
method: 'POST',
|
|
body: {
|
|
id: userId,
|
|
name: name,
|
|
status: status
|
|
}
|
|
});
|
|
|
|
if (response && response.success) {
|
|
window.whatsappManager.showSuccess('Usuario actualizado correctamente');
|
|
|
|
// Cerrar modal
|
|
const modal = bootstrap.Modal.getInstance(document.getElementById('editUserModal'));
|
|
if (modal) modal.hide();
|
|
|
|
// Recargar lista
|
|
window.whatsappManager.loadUsers();
|
|
} else {
|
|
window.whatsappManager.showError(`Error: ${response?.error || 'Error desconocido'}`);
|
|
}
|
|
} catch (error) {
|
|
window.whatsappManager.showError('Error actualizando usuario: ' + error.message);
|
|
}
|
|
}
|
|
};
|
|
|
|
// Hacer que app.saveTemplate() y app.saveMenu() funcionen
|
|
window.app = {
|
|
saveTemplate: function () {
|
|
if (window.whatsappManager) {
|
|
window.whatsappManager.saveTemplate();
|
|
}
|
|
},
|
|
saveMenu: function () {
|
|
if (window.whatsappManager) {
|
|
window.whatsappManager.saveMenu();
|
|
}
|
|
},
|
|
saveAutoResponse: function () {
|
|
if (window.whatsappManager) {
|
|
window.whatsappManager.saveAutoResponse();
|
|
}
|
|
}
|
|
};
|
|
|
|
// Funciones globales para gestión de menús
|
|
window.editMenu = async function (menuId) {
|
|
console.log('Editando menú:', menuId);
|
|
|
|
try {
|
|
// Obtener datos del menú
|
|
const response = await window.whatsappManager.apiCall('get_menus.php');
|
|
|
|
if (response && response.success) {
|
|
const menu = response.data.find(m => m.id == menuId);
|
|
|
|
if (menu) {
|
|
showEditMenuModal(menu);
|
|
} else {
|
|
window.whatsappManager.showError('Menú no encontrado');
|
|
}
|
|
} else {
|
|
window.whatsappManager.showError('Error cargando datos del menú');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error editando menú:', error);
|
|
window.whatsappManager.showError('Error editando menú: ' + error.message);
|
|
}
|
|
};
|
|
|
|
window.deleteMenu = function (menuId) {
|
|
console.log('Eliminando menú:', menuId);
|
|
if (confirm(`¿Está seguro que desea eliminar el menú ${menuId}?`)) {
|
|
if (window.whatsappManager) {
|
|
window.whatsappManager.deleteMenuAction(menuId);
|
|
}
|
|
}
|
|
};
|
|
|
|
window.viewMenuOptions = async function (menuId) {
|
|
console.log('Viendo opciones del menú:', menuId);
|
|
|
|
try {
|
|
// Obtener datos del menú y sus opciones
|
|
const response = await window.whatsappManager.apiCall('get_menus.php');
|
|
|
|
if (response && response.success) {
|
|
const menu = response.data.find(m => m.id == menuId);
|
|
|
|
if (menu) {
|
|
showMenuOptionsModal(menu);
|
|
} else {
|
|
window.whatsappManager.showError('Menú no encontrado');
|
|
}
|
|
} else {
|
|
window.whatsappManager.showError('Error cargando opciones del menú');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error viendo opciones:', error);
|
|
window.whatsappManager.showError('Error viendo opciones: ' + error.message);
|
|
}
|
|
};
|
|
|
|
// Función para agregar nueva opción al menú
|
|
window.addMenuOption = function () {
|
|
const container = document.getElementById('menu-options-container');
|
|
if (!container) return;
|
|
|
|
const optionIndex = container.children.length + 1;
|
|
|
|
const optionHtml = `
|
|
<div class="menu-option-item border rounded p-3 mb-2">
|
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
|
<h6 class="mb-0">Opción ${optionIndex}</h6>
|
|
<button type="button" class="btn btn-sm btn-outline-danger" onclick="removeMenuOption(this)">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
<label class="form-label">Clave</label>
|
|
<input type="text" class="form-control option-key" placeholder="ej: 1" required>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label">Texto</label>
|
|
<input type="text" class="form-control option-text" placeholder="ej: Información" required>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label class="form-label">Acción</label>
|
|
<select class="form-select option-action">
|
|
<option value="message">Enviar mensaje</option>
|
|
<option value="submenu">Submenú</option>
|
|
<option value="template">Plantilla</option>
|
|
<option value="function">Función personalizada</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<label class="form-label">Valor</label>
|
|
<input type="text" class="form-control option-value" placeholder="Contenido">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
container.insertAdjacentHTML('beforeend', optionHtml);
|
|
};
|
|
|
|
// Función para remover opción del menú
|
|
window.removeMenuOption = function (button) {
|
|
const optionItem = button.closest('.menu-option-item');
|
|
if (optionItem) {
|
|
optionItem.remove();
|
|
updateOptionNumbers();
|
|
}
|
|
};
|
|
|
|
// Funciones globales para gestión de respuestas automáticas
|
|
// La función real está más abajo en el archivo (línea ~2390)
|
|
|
|
window.deleteAutoResponse = function (responseId) {
|
|
console.log('Eliminando respuesta automática:', responseId);
|
|
if (confirm(`¿Está seguro que desea eliminar la respuesta automática ${responseId}?`)) {
|
|
if (window.whatsappManager) {
|
|
window.whatsappManager.deleteAutoResponseAction(responseId);
|
|
}
|
|
}
|
|
};
|
|
|
|
// Funciones para modal de autorespuestas
|
|
window.showCreateAutoResponseModal = function() {
|
|
document.getElementById('autoresponse-form').reset();
|
|
document.getElementById('autoresponse-id').value = '';
|
|
document.getElementById('createAutoResponseModalLabel').innerHTML = '<i class="fas fa-robot"></i> Crear Nueva Respuesta Automática';
|
|
|
|
// Reset campos específicos
|
|
updateTriggerFields('keyword');
|
|
updateResponseTypeFields('text');
|
|
|
|
const modal = new bootstrap.Modal(document.getElementById('createAutoResponseModal'));
|
|
modal.show();
|
|
};
|
|
|
|
window.showEditAutoResponseModal = function(autoresponse) {
|
|
document.getElementById('autoresponse-id').value = autoresponse.id;
|
|
document.getElementById('createAutoResponseModalLabel').innerHTML = '<i class="fas fa-edit"></i> Editar Respuesta Automática';
|
|
|
|
// Llenar campos del formulario
|
|
document.getElementById('autoresponse-trigger-type').value = autoresponse.trigger_type;
|
|
document.getElementById('autoresponse-trigger-value').value = autoresponse.trigger_value || '';
|
|
document.getElementById('autoresponse-text').value = autoresponse.response_text;
|
|
document.getElementById('autoresponse-type').value = autoresponse.response_type;
|
|
document.getElementById('autoresponse-priority').value = autoresponse.priority;
|
|
document.getElementById('autoresponse-active').value = autoresponse.is_active ? '1' : '0';
|
|
document.getElementById('autoresponse-template-name').value = autoresponse.template_name || '';
|
|
document.getElementById('autoresponse-menu-id').value = autoresponse.menu_id || '';
|
|
|
|
// Actualizar campos según el tipo
|
|
updateTriggerFields(autoresponse.trigger_type);
|
|
updateResponseTypeFields(autoresponse.response_type);
|
|
|
|
const modal = new bootstrap.Modal(document.getElementById('createAutoResponseModal'));
|
|
modal.show();
|
|
};
|
|
|
|
window.updateTriggerFields = function(triggerType) {
|
|
const valueGroup = document.getElementById('trigger-value-group');
|
|
const valueLabel = document.getElementById('trigger-value-label');
|
|
const valueInput = document.getElementById('autoresponse-trigger-value');
|
|
const valueHelp = document.getElementById('trigger-value-help');
|
|
|
|
if (!valueGroup || !valueLabel || !valueInput || !valueHelp) {
|
|
console.warn('Elementos del modal de autorespuesta no encontrados');
|
|
return;
|
|
}
|
|
|
|
switch (triggerType) {
|
|
case 'keyword':
|
|
valueGroup.style.display = 'block';
|
|
valueLabel.textContent = 'Palabras Clave *';
|
|
valueInput.placeholder = 'hola,buenos días,hi,hello';
|
|
valueInput.required = true;
|
|
valueHelp.textContent = 'Separa múltiples palabras con comas';
|
|
break;
|
|
|
|
case 'contains':
|
|
valueGroup.style.display = 'block';
|
|
valueLabel.textContent = 'Texto a Buscar *';
|
|
valueInput.placeholder = 'precio';
|
|
valueInput.required = true;
|
|
valueHelp.textContent = 'Texto que debe contener el mensaje del usuario';
|
|
break;
|
|
|
|
case 'exact':
|
|
valueGroup.style.display = 'block';
|
|
valueLabel.textContent = 'Mensaje Exacto *';
|
|
valueInput.placeholder = 'quiero información';
|
|
valueInput.required = true;
|
|
valueHelp.textContent = 'El mensaje debe coincidir exactamente';
|
|
break;
|
|
|
|
case 'welcome':
|
|
case 'default':
|
|
valueGroup.style.display = 'none';
|
|
valueInput.required = false;
|
|
valueInput.value = '';
|
|
break;
|
|
}
|
|
};
|
|
|
|
window.updateResponseTypeFields = function(responseType) {
|
|
const templateFields = document.getElementById('template-fields');
|
|
const menuFields = document.getElementById('menu-fields');
|
|
|
|
if (!templateFields || !menuFields) {
|
|
console.warn('Campos adicionales del modal no encontrados');
|
|
return;
|
|
}
|
|
|
|
// Ocultar todos los campos adicionales
|
|
templateFields.style.display = 'none';
|
|
menuFields.style.display = 'none';
|
|
|
|
// Mostrar campos según el tipo
|
|
switch (responseType) {
|
|
case 'template':
|
|
templateFields.style.display = 'block';
|
|
break;
|
|
case 'menu':
|
|
menuFields.style.display = 'block';
|
|
// Cargar menús disponibles si no están cargados
|
|
loadMenusForSelect();
|
|
break;
|
|
}
|
|
};
|
|
|
|
window.loadMenusForSelect = function() {
|
|
fetch('/api/get_menus.php')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
const select = document.getElementById('autoresponse-menu-id');
|
|
if (select) {
|
|
select.innerHTML = '<option value="">Seleccionar menú...</option>';
|
|
|
|
data.data.forEach(menu => {
|
|
const option = document.createElement('option');
|
|
option.value = menu.id;
|
|
option.textContent = `${menu.name} (${menu.menu_key})`;
|
|
select.appendChild(option);
|
|
});
|
|
}
|
|
}
|
|
})
|
|
.catch(error => console.error('Error loading menus for select:', error));
|
|
};
|
|
|
|
// Actualizar función editAutoResponse para usar el modal
|
|
window.editAutoResponse = function (responseId) {
|
|
console.log('Editando respuesta automática:', responseId);
|
|
|
|
// Buscar la respuesta en los datos cargados
|
|
if (window.whatsappManager && window.whatsappManager.autoResponsesData) {
|
|
const autoresponse = window.whatsappManager.autoResponsesData.find(ar => ar.id == responseId);
|
|
if (autoresponse) {
|
|
showEditAutoResponseModal(autoresponse);
|
|
} else {
|
|
console.error('Respuesta automática no encontrada:', responseId);
|
|
alert('Error: No se pudo cargar la respuesta automática');
|
|
}
|
|
} else {
|
|
console.error('Datos de respuestas automáticas no disponibles');
|
|
alert('Error: Datos no disponibles, recarga la página');
|
|
}
|
|
};
|
|
|
|
window.showCreateAutoResponseModal = function () {
|
|
console.log('🔵 Abriendo modal de respuesta automática...');
|
|
|
|
const modalElement = document.getElementById('createAutoResponseModal');
|
|
if (!modalElement) {
|
|
console.error('❌ Modal de respuesta automática no encontrado');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const form = document.getElementById('autoresponse-form');
|
|
if (form) form.reset();
|
|
|
|
if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
|
|
const modal = new bootstrap.Modal(modalElement);
|
|
modal.show();
|
|
} else {
|
|
modalElement.style.display = 'block';
|
|
modalElement.classList.add('show');
|
|
}
|
|
console.log('✅ Modal de respuesta automática abierto');
|
|
} catch (error) {
|
|
console.error('❌ Error abriendo modal de respuesta automática:', error);
|
|
}
|
|
};
|
|
|
|
// Función para cambiar tipo de disparador
|
|
window.toggleTriggerType = function () {
|
|
const triggerType = document.getElementById('autoresponse-type')?.value;
|
|
const triggerContainer = document.getElementById('trigger-container');
|
|
|
|
if (triggerContainer) {
|
|
if (triggerType === 'welcome' || triggerType === 'default') {
|
|
triggerContainer.style.display = 'none';
|
|
} else {
|
|
triggerContainer.style.display = 'block';
|
|
|
|
const triggerInput = document.getElementById('autoresponse-trigger');
|
|
const triggerLabel = document.querySelector('label[for="autoresponse-trigger"]');
|
|
|
|
if (triggerInput && triggerLabel) {
|
|
switch (triggerType) {
|
|
case 'keyword':
|
|
triggerLabel.textContent = 'Palabra Clave *';
|
|
triggerInput.placeholder = 'ej: hola, info, precios';
|
|
break;
|
|
case 'contains':
|
|
triggerLabel.textContent = 'Texto que debe contener *';
|
|
triggerInput.placeholder = 'ej: precio, información';
|
|
break;
|
|
case 'exact':
|
|
triggerLabel.textContent = 'Mensaje exacto *';
|
|
triggerInput.placeholder = 'ej: ¿Cuáles son sus precios?';
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
// Funciones para el formulario de mensajes
|
|
window.toggleRecipientType = function () {
|
|
const recipientType = document.getElementById('recipient-type').value;
|
|
const existingGroup = document.getElementById('existing-recipient-group');
|
|
const manualGroup = document.getElementById('manual-recipient-group');
|
|
|
|
if (recipientType === 'manual') {
|
|
existingGroup.style.display = 'none';
|
|
manualGroup.style.display = 'block';
|
|
} else {
|
|
existingGroup.style.display = 'block';
|
|
manualGroup.style.display = 'none';
|
|
}
|
|
};
|
|
|
|
window.toggleMessageType = function () {
|
|
const messageType = document.getElementById('message-type').value;
|
|
const textGroup = document.getElementById('message-text-group');
|
|
const templateGroup = document.getElementById('template-group');
|
|
|
|
if (messageType === 'template') {
|
|
textGroup.style.display = 'none';
|
|
templateGroup.style.display = 'block';
|
|
} else {
|
|
textGroup.style.display = 'block';
|
|
templateGroup.style.display = 'none';
|
|
}
|
|
};
|
|
|
|
// Función de diagnóstico
|
|
window.runDiagnostic = function () {
|
|
const resultsDiv = document.getElementById('diagnostic-results');
|
|
|
|
// Mostrar spinner de carga
|
|
resultsDiv.innerHTML = `
|
|
<div class="text-center">
|
|
<div class="spinner-border spinner-border-sm" role="status">
|
|
<span class="visually-hidden">Cargando...</span>
|
|
</div>
|
|
<p class="mt-2">Ejecutando diagnóstico...</p>
|
|
</div>
|
|
`;
|
|
|
|
fetch('./api/diagnose_whatsapp.php')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
displayDiagnosticResults(data);
|
|
} else {
|
|
resultsDiv.innerHTML = `
|
|
<div class="alert alert-danger">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
Error: ${data.error || 'Error desconocido'}
|
|
</div>
|
|
`;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error en diagnóstico:', error);
|
|
resultsDiv.innerHTML = `
|
|
<div class="alert alert-danger">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
Error de conexión: ${error.message}
|
|
</div>
|
|
`;
|
|
});
|
|
};
|
|
|
|
function displayDiagnosticResults(data) {
|
|
const resultsDiv = document.getElementById('diagnostic-results');
|
|
|
|
let html = `
|
|
<div class="diagnostic-results">
|
|
<small class="text-muted">Última verificación: ${data.timestamp}</small>
|
|
|
|
<!-- Estado de Configuración -->
|
|
<div class="mt-3">
|
|
<h6><i class="fas fa-cog"></i> Configuración</h6>
|
|
<div class="list-group list-group-flush">
|
|
<div class="list-group-item d-flex justify-content-between align-items-center py-2">
|
|
<small>Phone Number ID</small>
|
|
<span class="badge bg-${data.config_status.phone_number_id ? 'success' : 'danger'}">
|
|
${data.config_status.phone_number_id ? '✓' : '✗'}
|
|
</span>
|
|
</div>
|
|
<div class="list-group-item d-flex justify-content-between align-items-center py-2">
|
|
<small>Access Token</small>
|
|
<span class="badge bg-${data.config_status.access_token ? 'success' : 'danger'}">
|
|
${data.config_status.access_token ? '✓' : '✗'}
|
|
</span>
|
|
</div>
|
|
<div class="list-group-item d-flex justify-content-between align-items-center py-2">
|
|
<small>Webhook Token</small>
|
|
<span class="badge bg-${data.config_status.webhook_verify_token ? 'success' : 'danger'}">
|
|
${data.config_status.webhook_verify_token ? '✓' : '✗'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Estado de Plantillas -->
|
|
<div class="mt-3">
|
|
<h6><i class="fas fa-file-text"></i> Plantillas</h6>
|
|
<div class="row text-center">
|
|
<div class="col-4">
|
|
<div class="text-success">
|
|
<strong>${data.template_status.approved || 0}</strong><br>
|
|
<small>Aprobadas</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-4">
|
|
<div class="text-warning">
|
|
<strong>${data.template_status.pending || 0}</strong><br>
|
|
<small>Pendientes</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-4">
|
|
<div class="text-danger">
|
|
<strong>${data.template_status.rejected || 0}</strong><br>
|
|
<small>Rechazadas</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Estado de API -->
|
|
<div class="mt-3">
|
|
<h6><i class="fas fa-cloud"></i> API WhatsApp</h6>
|
|
<div class="alert alert-${data.api_status.reachable ? 'success' : 'danger'} p-2">
|
|
<small>
|
|
${data.api_status.reachable ?
|
|
`✓ Conectado - ${data.api_status.phone_number || 'N/A'}` :
|
|
`✗ ${data.api_status.error || 'No conectado'}`
|
|
}
|
|
</small>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// Recomendaciones
|
|
if (data.recommendations && data.recommendations.length > 0) {
|
|
html += `
|
|
<div class="mt-3">
|
|
<h6><i class="fas fa-lightbulb"></i> Recomendaciones</h6>
|
|
<ul class="list-unstyled">
|
|
`;
|
|
data.recommendations.forEach(rec => {
|
|
html += `<li><small><i class="fas fa-arrow-right text-muted"></i> ${rec}</small></li>`;
|
|
});
|
|
html += `
|
|
</ul>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
html += '</div>';
|
|
resultsDiv.innerHTML = html;
|
|
}
|
|
|
|
|
|
|
|
// ==============================================
|
|
// EVENT LISTENERS PARA MODALES DE AUTORESPUESTAS
|
|
// ==============================================
|
|
|
|
// Agregar event listeners cuando el DOM esté listo
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Event listener para cambio de tipo de trigger
|
|
const triggerTypeSelect = document.getElementById('autoresponse-trigger-type');
|
|
if (triggerTypeSelect) {
|
|
triggerTypeSelect.addEventListener('change', function() {
|
|
updateTriggerFields(this.value);
|
|
});
|
|
}
|
|
|
|
// Event listener para cambio de tipo de respuesta
|
|
const responseTypeSelect = document.getElementById('autoresponse-type');
|
|
if (responseTypeSelect) {
|
|
responseTypeSelect.addEventListener('change', function() {
|
|
updateResponseTypeFields(this.value);
|
|
});
|
|
}
|
|
|
|
// Event listener para el modal cuando se muestre
|
|
const autoResponseModal = document.getElementById('createAutoResponseModal');
|
|
if (autoResponseModal) {
|
|
autoResponseModal.addEventListener('shown.bs.modal', function () {
|
|
// Enfocar el primer campo cuando se abra el modal
|
|
const firstInput = autoResponseModal.querySelector('input, select, textarea');
|
|
if (firstInput) {
|
|
firstInput.focus();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
// Funciones globales para gestión de usuarios
|
|
|
|
// Función para editar usuario
|
|
window.editUser = function(userId) {
|
|
console.log('Editando usuario:', userId);
|
|
|
|
// Buscar los datos del usuario actual en la tabla
|
|
const userRow = document.querySelector(`button[onclick="editUser(${userId})"]`).closest('tr');
|
|
const cells = userRow.querySelectorAll('td');
|
|
|
|
const currentData = {
|
|
id: userId,
|
|
phone: cells[1].textContent,
|
|
name: cells[2].textContent === 'Sin nombre' ? '' : cells[2].textContent,
|
|
status: cells[3].querySelector('.badge').textContent.toLowerCase()
|
|
};
|
|
|
|
showEditUserModal(currentData);
|
|
};
|
|
|
|
// Función para eliminar usuario
|
|
window.deleteUser = function(userId) {
|
|
console.log('Eliminando usuario:', userId);
|
|
|
|
const userRow = document.querySelector(`button[onclick="deleteUser(${userId})"]`).closest('tr');
|
|
const userName = userRow.querySelectorAll('td')[2].textContent;
|
|
const userPhone = userRow.querySelectorAll('td')[1].textContent;
|
|
|
|
if (confirm(`¿Estás seguro de que quieres eliminar este usuario?\n\nUsuario: ${userName}\nTeléfono: ${userPhone}\n\nEsta acción no se puede deshacer y eliminará:\n• Todos sus mensajes\n• Su historial de conversación\n• Sus datos personales`)) {
|
|
deleteUserAction(userId);
|
|
}
|
|
};
|
|
|
|
// Mostrar modal de edición de usuario
|
|
function showEditUserModal(userData) {
|
|
const modalHtml = `
|
|
<div class="modal fade" id="editUserModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-warning text-dark">
|
|
<h5 class="modal-title">
|
|
<i class="fas fa-edit"></i> Editar Usuario
|
|
</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="editUserForm">
|
|
<input type="hidden" id="editUserId" value="${userData.id}">
|
|
|
|
<div class="mb-3">
|
|
<label for="editUserPhone" class="form-label">
|
|
<i class="fas fa-phone"></i> Número de Teléfono
|
|
</label>
|
|
<input type="text" class="form-control" id="editUserPhone" value="${userData.phone}" readonly>
|
|
<small class="text-muted">El número de teléfono no se puede modificar</small>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="editUserName" class="form-label">
|
|
<i class="fas fa-user"></i> Nombre
|
|
</label>
|
|
<input type="text" class="form-control" id="editUserName" value="${userData.name}" placeholder="Nombre del usuario">
|
|
<small class="text-muted">Deja vacío para mostrar 'Sin nombre'</small>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="editUserStatus" class="form-label">
|
|
<i class="fas fa-toggle-on"></i> Estado
|
|
</label>
|
|
<select class="form-select" id="editUserStatus">
|
|
<option value="active" ${userData.status === 'active' ? 'selected' : ''}>🟢 Activo</option>
|
|
<option value="inactive" ${userData.status === 'inactive' ? 'selected' : ''}>🔴 Inactivo</option>
|
|
<option value="blocked" ${userData.status === 'blocked' ? 'selected' : ''}>🚫 Bloqueado</option>
|
|
</select>
|
|
<small class="text-muted">El estado afecta cómo interactúa el bot con este usuario</small>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-success" onclick="saveUserEdit()">
|
|
<i class="fas fa-save"></i> Guardar Cambios
|
|
</button>
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// Remover modal anterior si existe
|
|
const existingModal = document.getElementById('editUserModal');
|
|
if (existingModal) {
|
|
existingModal.remove();
|
|
}
|
|
|
|
document.body.insertAdjacentHTML('beforeend', modalHtml);
|
|
|
|
const modal = new bootstrap.Modal(document.getElementById('editUserModal'));
|
|
modal.show();
|
|
}
|
|
|
|
// Guardar edición de usuario
|
|
window.saveUserEdit = async function() {
|
|
const userId = document.getElementById('editUserId').value;
|
|
const userName = document.getElementById('editUserName').value.trim();
|
|
const userStatus = document.getElementById('editUserStatus').value;
|
|
|
|
console.log('Guardando usuario:', { userId, userName, userStatus });
|
|
|
|
const userData = {
|
|
user_id: userId,
|
|
name: userName || null, // null si está vacío
|
|
status: userStatus
|
|
};
|
|
|
|
try {
|
|
const response = await window.whatsappManager.apiCall('update_user.php', {
|
|
method: 'POST',
|
|
body: userData
|
|
});
|
|
|
|
if (response && response.success) {
|
|
window.whatsappManager.showSuccess('Usuario actualizado correctamente');
|
|
|
|
// Cerrar modal
|
|
const modal = bootstrap.Modal.getInstance(document.getElementById('editUserModal'));
|
|
if (modal) modal.hide();
|
|
|
|
// Recargar lista de usuarios
|
|
setTimeout(() => {
|
|
window.whatsappManager.loadUsers();
|
|
}, 500);
|
|
} else {
|
|
window.whatsappManager.showError(`Error actualizando usuario: ${response?.error || 'Error desconocido'}`);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
window.whatsappManager.showError('Error actualizando usuario: ' + error.message);
|
|
}
|
|
};
|
|
|
|
// Acción de eliminar usuario
|
|
async function deleteUserAction(userId) {
|
|
try {
|
|
console.log('Eliminando usuario con ID:', userId);
|
|
|
|
const response = await window.whatsappManager.apiCall('delete_user.php', {
|
|
method: 'POST',
|
|
body: { user_id: userId }
|
|
});
|
|
|
|
if (response && response.success) {
|
|
window.whatsappManager.showSuccess('Usuario eliminado correctamente');
|
|
|
|
// Recargar lista de usuarios
|
|
setTimeout(() => {
|
|
window.whatsappManager.loadUsers();
|
|
}, 500);
|
|
} else {
|
|
window.whatsappManager.showError(`Error eliminando usuario: ${response?.error || 'Error desconocido'}`);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
window.whatsappManager.showError('Error eliminando usuario: ' + error.message);
|
|
}
|
|
}
|
|
|
|
// ========================= FUNCIONES MODALES PARA MENÚS =========================
|
|
|
|
// Modal para editar menú
|
|
function showEditMenuModal(menuData) {
|
|
const modalHtml = `
|
|
<div class="modal fade" id="editMenuModal" tabindex="-1">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">
|
|
<i class="fas fa-edit"></i> Editar Menú: ${menuData.name || 'Sin nombre'}
|
|
</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="editMenuForm">
|
|
<input type="hidden" id="editMenuId" value="${menuData.id}">
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<label for="editMenuName" class="form-label">
|
|
<i class="fas fa-tag"></i> Nombre del Menú
|
|
</label>
|
|
<input type="text" class="form-control" id="editMenuName"
|
|
value="${menuData.name || ''}" required>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="editMenuKey" class="form-label">
|
|
<i class="fas fa-key"></i> Clave del Menú
|
|
</label>
|
|
<input type="text" class="form-control" id="editMenuKey"
|
|
value="${menuData.menu_key || menuData.trigger || ''}" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-3">
|
|
<div class="col-12">
|
|
<label for="editMenuDescription" class="form-label">
|
|
<i class="fas fa-info-circle"></i> Descripción
|
|
</label>
|
|
<textarea class="form-control" id="editMenuDescription" rows="2"
|
|
placeholder="Descripción del menú">${menuData.description || ''}</textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-3">
|
|
<div class="col-md-8">
|
|
<label for="editMenuWelcome" class="form-label">
|
|
<i class="fas fa-comment"></i> Mensaje de Bienvenida
|
|
</label>
|
|
<textarea class="form-control" id="editMenuWelcome" rows="3"
|
|
placeholder="¡Hola! Selecciona una opción:">${menuData.welcome_message || ''}</textarea>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label for="editMenuStatus" class="form-label">
|
|
<i class="fas fa-toggle-on"></i> Estado
|
|
</label>
|
|
<select class="form-control" id="editMenuStatus">
|
|
<option value="active" ${menuData.status === 'active' ? 'selected' : ''}>Activo</option>
|
|
<option value="inactive" ${menuData.status === 'inactive' ? 'selected' : ''}>Inactivo</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
${menuData.options && menuData.options.length > 0 ? `
|
|
<div class="mt-4">
|
|
<h6><i class="fas fa-list"></i> Opciones Actuales (${menuData.options.length})</h6>
|
|
<div class="row">
|
|
${menuData.options.map(option => `
|
|
<div class="col-md-6 mb-2">
|
|
<div class="card card-body py-2">
|
|
<small><strong>${option.option_key || option.key}.</strong> ${option.option_text || option.text}</small>
|
|
<small class="text-muted">${option.option_action || option.action}: ${(option.option_value || option.value || '').substring(0, 30)}${(option.option_value || option.value || '').length > 30 ? '...' : ''}</small>
|
|
</div>
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
<small class="text-muted">Para editar opciones individuales, usar "Ver opciones" desde la tabla principal.</small>
|
|
</div>
|
|
` : ''}
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-success" onclick="saveMenuEdit()">
|
|
<i class="fas fa-save"></i> Guardar Cambios
|
|
</button>
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
|
|
<i class="fas fa-times"></i> Cancelar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// Remover modal anterior si existe
|
|
const existingModal = document.getElementById('editMenuModal');
|
|
if (existingModal) {
|
|
existingModal.remove();
|
|
}
|
|
|
|
document.body.insertAdjacentHTML('beforeend', modalHtml);
|
|
|
|
const modal = new bootstrap.Modal(document.getElementById('editMenuModal'));
|
|
modal.show();
|
|
}
|
|
|
|
// Modal para ver opciones del menú
|
|
function showMenuOptionsModal(menuData) {
|
|
const modalHtml = `
|
|
<div class="modal fade" id="viewMenuOptionsModal" tabindex="-1">
|
|
<div class="modal-dialog modal-xl">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">
|
|
<i class="fas fa-list"></i> Opciones del Menú: ${menuData.name || 'Sin nombre'}
|
|
</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="row mb-3">
|
|
<div class="col-md-4">
|
|
<strong><i class="fas fa-info-circle"></i> Información del Menú</strong><br>
|
|
<small class="text-muted">
|
|
<strong>Clave:</strong> ${menuData.menu_key || menuData.trigger || 'N/A'}<br>
|
|
<strong>Estado:</strong> <span class="badge bg-${menuData.status === 'active' ? 'success' : 'secondary'}">${menuData.status || 'active'}</span><br>
|
|
<strong>Descripción:</strong> ${menuData.description || 'Sin descripción'}
|
|
</small>
|
|
</div>
|
|
<div class="col-md-8">
|
|
<strong><i class="fas fa-comment"></i> Mensaje de Bienvenida</strong><br>
|
|
<div class="border rounded p-2 bg-light">
|
|
<small>${menuData.welcome_message || 'Sin mensaje configurado'}</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h6><i class="fas fa-list-ol"></i> Opciones del Menú (${menuData.options ? menuData.options.length : 0})</h6>
|
|
<button class="btn btn-outline-primary btn-sm" onclick="addMenuOptionInModal(${menuData.id})">
|
|
<i class="fas fa-plus"></i> Agregar Opción
|
|
</button>
|
|
</div>
|
|
|
|
<div id="menuOptionsContainer">
|
|
${menuData.options && menuData.options.length > 0 ? `
|
|
<div class="table-responsive">
|
|
<table class="table table-sm table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th width="60">Clave</th>
|
|
<th>Texto</th>
|
|
<th width="100">Acción</th>
|
|
<th>Valor</th>
|
|
<th width="80">Orden</th>
|
|
<th width="120">Acciones</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
${menuData.options.map((option, index) => `
|
|
<tr data-option-id="${option.id || index}">
|
|
<td><code>${option.option_key || option.key || index + 1}</code></td>
|
|
<td>${option.option_text || option.text || ''}</td>
|
|
<td><span class="badge bg-info">${option.option_action || option.action || 'message'}</span></td>
|
|
<td><small>${(option.option_value || option.value || '').substring(0, 40)}${(option.option_value || option.value || '').length > 40 ? '...' : ''}</small></td>
|
|
<td>${option.order_index || index + 1}</td>
|
|
<td>
|
|
<button class="btn btn-outline-warning btn-xs" onclick="editMenuOption(${menuData.id}, ${option.id || index})" title="Editar">
|
|
<i class="fas fa-edit"></i>
|
|
</button>
|
|
<button class="btn btn-outline-danger btn-xs ms-1" onclick="deleteMenuOption(${menuData.id}, ${option.id || index})" title="Eliminar">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
`).join('')}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
` : `
|
|
<div class="text-center py-4">
|
|
<i class="fas fa-list fa-3x text-muted mb-3"></i>
|
|
<p class="text-muted">Este menú no tiene opciones configuradas.</p>
|
|
<button class="btn btn-primary" onclick="addMenuOptionInModal(${menuData.id})">
|
|
<i class="fas fa-plus"></i> Agregar Primera Opción
|
|
</button>
|
|
</div>
|
|
`}
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-outline-success" onclick="testMenuPreview(${menuData.id})">
|
|
<i class="fas fa-eye"></i> Vista Previa
|
|
</button>
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
|
|
<i class="fas fa-times"></i> Cerrar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// Remover modal anterior si existe
|
|
const existingModal = document.getElementById('viewMenuOptionsModal');
|
|
if (existingModal) {
|
|
existingModal.remove();
|
|
}
|
|
|
|
document.body.insertAdjacentHTML('beforeend', modalHtml);
|
|
|
|
const modal = new bootstrap.Modal(document.getElementById('viewMenuOptionsModal'));
|
|
modal.show();
|
|
}
|
|
|
|
// Guardar edición de menú
|
|
window.saveMenuEdit = async function() {
|
|
const menuId = document.getElementById('editMenuId').value;
|
|
const menuName = document.getElementById('editMenuName').value.trim();
|
|
const menuKey = document.getElementById('editMenuKey').value.trim();
|
|
const menuDescription = document.getElementById('editMenuDescription').value.trim();
|
|
const menuWelcome = document.getElementById('editMenuWelcome').value.trim();
|
|
const menuStatus = document.getElementById('editMenuStatus').value;
|
|
|
|
if (!menuName || !menuKey) {
|
|
window.whatsappManager.showError('Nombre y clave del menú son obligatorios');
|
|
return;
|
|
}
|
|
|
|
console.log('Guardando menú editado:', { menuId, menuName, menuKey, menuStatus });
|
|
|
|
const menuData = {
|
|
id: menuId,
|
|
name: menuName,
|
|
menu_key: menuKey,
|
|
description: menuDescription,
|
|
welcome_message: menuWelcome,
|
|
status: menuStatus
|
|
};
|
|
|
|
try {
|
|
const response = await window.whatsappManager.apiCall('save_menu.php', {
|
|
method: 'POST',
|
|
body: menuData
|
|
});
|
|
|
|
if (response && response.success) {
|
|
window.whatsappManager.showSuccess('Menú actualizado correctamente');
|
|
|
|
// Cerrar modal
|
|
const modal = bootstrap.Modal.getInstance(document.getElementById('editMenuModal'));
|
|
if (modal) modal.hide();
|
|
|
|
// Recargar lista de menús
|
|
setTimeout(() => {
|
|
window.whatsappManager.loadMenus();
|
|
}, 500);
|
|
} else {
|
|
window.whatsappManager.showError(`Error actualizando menú: ${response?.error || 'Error desconocido'}`);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
window.whatsappManager.showError('Error actualizando menú: ' + error.message);
|
|
}
|
|
};
|
|
|
|
// Funciones auxiliares para opciones
|
|
window.addMenuOptionInModal = function(menuId) {
|
|
console.log('Agregando opción al menú:', menuId);
|
|
|
|
const modalHtml = `
|
|
<div class="modal fade" id="addMenuOptionModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">
|
|
<i class="fas fa-plus"></i> Agregar Opción al Menú
|
|
</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="addOptionForm">
|
|
<input type="hidden" id="addOptionMenuId" value="${menuId}">
|
|
|
|
<div class="mb-3">
|
|
<label for="addOptionKey" class="form-label">
|
|
<i class="fas fa-key"></i> Clave (Número de Opción)
|
|
</label>
|
|
<input type="text" class="form-control" id="addOptionKey"
|
|
placeholder="1" required>
|
|
<small class="text-muted">Número que el usuario escribirá para seleccionar esta opción</small>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="addOptionText" class="form-label">
|
|
<i class="fas fa-text"></i> Texto de la Opción
|
|
</label>
|
|
<input type="text" class="form-control" id="addOptionText"
|
|
placeholder="Información del servicio" required>
|
|
<small class="text-muted">Texto que se mostrará al usuario</small>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="addOptionAction" class="form-label">
|
|
<i class="fas fa-cog"></i> Tipo de Acción
|
|
</label>
|
|
<select class="form-control" id="addOptionAction">
|
|
<option value="message">Mensaje de respuesta</option>
|
|
<option value="menu">Ir a otro menú</option>
|
|
<option value="api_call">Llamar API</option>
|
|
<option value="end">Finalizar conversación</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="addOptionValue" class="form-label">
|
|
<i class="fas fa-edit"></i> Valor de la Acción
|
|
</label>
|
|
<textarea class="form-control" id="addOptionValue" rows="3"
|
|
placeholder="Contenido de la respuesta o valor de la acción"></textarea>
|
|
<small class="text-muted">Contenido que se enviará o ejecutará según el tipo de acción</small>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-success" onclick="saveNewMenuOption()">
|
|
<i class="fas fa-save"></i> Guardar Opción
|
|
</button>
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
|
|
<i class="fas fa-times"></i> Cancelar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// Remover modal anterior si existe
|
|
const existingModal = document.getElementById('addMenuOptionModal');
|
|
if (existingModal) {
|
|
existingModal.remove();
|
|
}
|
|
|
|
document.body.insertAdjacentHTML('beforeend', modalHtml);
|
|
|
|
const modal = new bootstrap.Modal(document.getElementById('addMenuOptionModal'));
|
|
modal.show();
|
|
};
|
|
|
|
window.editMenuOption = async function(menuId, optionId) {
|
|
console.log('Editando opción:', { menuId, optionId });
|
|
|
|
try {
|
|
// Obtener datos del menú y sus opciones
|
|
const response = await window.whatsappManager.apiCall('get_menus.php');
|
|
|
|
if (response && response.success) {
|
|
const menu = response.data.find(m => m.id == menuId);
|
|
|
|
if (menu && menu.options) {
|
|
const option = menu.options.find(o => o.id == optionId);
|
|
|
|
if (option) {
|
|
showEditMenuOptionModal(menuId, option);
|
|
} else {
|
|
window.whatsappManager.showError('Opción no encontrada');
|
|
}
|
|
} else {
|
|
window.whatsappManager.showError('Menú no encontrado');
|
|
}
|
|
} else {
|
|
window.whatsappManager.showError('Error cargando datos de la opción');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
window.whatsappManager.showError('Error cargando opción: ' + error.message);
|
|
}
|
|
};
|
|
|
|
// Modal para editar opción de menú
|
|
function showEditMenuOptionModal(menuId, optionData) {
|
|
const modalHtml = `
|
|
<div class="modal fade" id="editMenuOptionModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">
|
|
<i class="fas fa-edit"></i> Editar Opción del Menú
|
|
</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="editOptionForm">
|
|
<input type="hidden" id="editOptionId" value="${optionData.id}">
|
|
<input type="hidden" id="editOptionMenuId" value="${menuId}">
|
|
|
|
<div class="mb-3">
|
|
<label for="editOptionKey" class="form-label">
|
|
<i class="fas fa-key"></i> Clave (Número de Opción)
|
|
</label>
|
|
<input type="text" class="form-control" id="editOptionKey"
|
|
value="${optionData.option_key || optionData.option_number || ''}" required>
|
|
<small class="text-muted">Número que el usuario escribirá para seleccionar esta opción</small>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="editOptionText" class="form-label">
|
|
<i class="fas fa-text"></i> Texto de la Opción
|
|
</label>
|
|
<input type="text" class="form-control" id="editOptionText"
|
|
value="${optionData.option_text || optionData.text || ''}" required>
|
|
<small class="text-muted">Texto que se mostrará al usuario</small>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="editOptionAction" class="form-label">
|
|
<i class="fas fa-cog"></i> Tipo de Acción
|
|
</label>
|
|
<select class="form-control" id="editOptionAction">
|
|
<option value="message" ${(optionData.option_action || optionData.action_type) === 'message' ? 'selected' : ''}>Mensaje de respuesta</option>
|
|
<option value="menu" ${(optionData.option_action || optionData.action_type) === 'menu' ? 'selected' : ''}>Ir a otro menú</option>
|
|
<option value="api_call" ${(optionData.option_action || optionData.action_type) === 'api_call' ? 'selected' : ''}>Llamar API</option>
|
|
<option value="end" ${(optionData.option_action || optionData.action_type) === 'end' ? 'selected' : ''}>Finalizar conversación</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="editOptionValue" class="form-label">
|
|
<i class="fas fa-edit"></i> Valor de la Acción
|
|
</label>
|
|
<textarea class="form-control" id="editOptionValue" rows="3"
|
|
placeholder="Contenido de la respuesta o valor de la acción">${optionData.option_value || optionData.action_value || ''}</textarea>
|
|
<small class="text-muted">Contenido que se enviará o ejecutará según el tipo de acción</small>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-success" onclick="saveEditedMenuOption()">
|
|
<i class="fas fa-save"></i> Guardar Cambios
|
|
</button>
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
|
|
<i class="fas fa-times"></i> Cancelar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// Remover modal anterior si existe
|
|
const existingModal = document.getElementById('editMenuOptionModal');
|
|
if (existingModal) {
|
|
existingModal.remove();
|
|
}
|
|
|
|
document.body.insertAdjacentHTML('beforeend', modalHtml);
|
|
|
|
const modal = new bootstrap.Modal(document.getElementById('editMenuOptionModal'));
|
|
modal.show();
|
|
}
|
|
|
|
// Función para guardar cambios en opción editada
|
|
window.saveEditedMenuOption = async function() {
|
|
const optionId = document.getElementById('editOptionId').value;
|
|
const menuId = document.getElementById('editOptionMenuId').value;
|
|
const optionKey = document.getElementById('editOptionKey').value.trim();
|
|
const optionText = document.getElementById('editOptionText').value.trim();
|
|
const optionAction = document.getElementById('editOptionAction').value;
|
|
const optionValue = document.getElementById('editOptionValue').value.trim();
|
|
|
|
if (!optionKey || !optionText) {
|
|
window.whatsappManager.showError('Clave y texto de la opción son obligatorios');
|
|
return;
|
|
}
|
|
|
|
console.log('Actualizando opción:', { optionId, menuId, optionKey, optionText });
|
|
|
|
const optionData = {
|
|
option_id: optionId,
|
|
menu_id: menuId,
|
|
option_key: optionKey,
|
|
option_text: optionText,
|
|
option_action: optionAction,
|
|
option_value: optionValue
|
|
};
|
|
|
|
try {
|
|
const response = await window.whatsappManager.apiCall('update_menu_option.php', {
|
|
method: 'POST',
|
|
body: optionData
|
|
});
|
|
|
|
if (response && response.success) {
|
|
window.whatsappManager.showSuccess('Opción actualizada correctamente');
|
|
|
|
// Cerrar modales
|
|
const editModal = bootstrap.Modal.getInstance(document.getElementById('editMenuOptionModal'));
|
|
if (editModal) editModal.hide();
|
|
|
|
const viewModal = bootstrap.Modal.getInstance(document.getElementById('viewMenuOptionsModal'));
|
|
if (viewModal) viewModal.hide();
|
|
|
|
// Reabrir modal actualizado
|
|
setTimeout(async () => {
|
|
const menusResponse = await window.whatsappManager.apiCall('get_menus.php');
|
|
if (menusResponse && menusResponse.success) {
|
|
const menu = menusResponse.data.find(m => m.id == menuId);
|
|
if (menu) {
|
|
showMenuOptionsModal(menu);
|
|
}
|
|
}
|
|
}, 500);
|
|
} else {
|
|
window.whatsappManager.showError(`Error actualizando opción: ${response?.error || 'Error desconocido'}`);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
window.whatsappManager.showError('Error actualizando opción: ' + error.message);
|
|
}
|
|
};
|
|
|
|
window.saveNewMenuOption = async function() {
|
|
const menuId = document.getElementById('addOptionMenuId').value;
|
|
const optionKey = document.getElementById('addOptionKey').value.trim();
|
|
const optionText = document.getElementById('addOptionText').value.trim();
|
|
const optionAction = document.getElementById('addOptionAction').value;
|
|
const optionValue = document.getElementById('addOptionValue').value.trim();
|
|
|
|
if (!optionKey || !optionText) {
|
|
window.whatsappManager.showError('Clave y texto de la opción son obligatorios');
|
|
return;
|
|
}
|
|
|
|
console.log('Guardando nueva opción:', { menuId, optionKey, optionText, optionAction, optionValue });
|
|
|
|
const optionData = {
|
|
menu_id: menuId,
|
|
option_key: optionKey,
|
|
option_text: optionText,
|
|
option_action: optionAction,
|
|
option_value: optionValue,
|
|
is_active: true
|
|
};
|
|
|
|
try {
|
|
const response = await window.whatsappManager.apiCall('save_menu_option.php', {
|
|
method: 'POST',
|
|
body: optionData
|
|
});
|
|
|
|
if (response && response.success) {
|
|
window.whatsappManager.showSuccess('Opción agregada correctamente');
|
|
|
|
// Cerrar modal de agregar opción
|
|
const addModal = bootstrap.Modal.getInstance(document.getElementById('addMenuOptionModal'));
|
|
if (addModal) addModal.hide();
|
|
|
|
// Cerrar modal de ver opciones si está abierto
|
|
const viewModal = bootstrap.Modal.getInstance(document.getElementById('viewMenuOptionsModal'));
|
|
if (viewModal) viewModal.hide();
|
|
|
|
// Reabrir modal de ver opciones actualizado
|
|
setTimeout(async () => {
|
|
const menusResponse = await window.whatsappManager.apiCall('get_menus.php');
|
|
if (menusResponse && menusResponse.success) {
|
|
const menu = menusResponse.data.find(m => m.id == menuId);
|
|
if (menu) {
|
|
showMenuOptionsModal(menu);
|
|
}
|
|
}
|
|
}, 500);
|
|
} else {
|
|
window.whatsappManager.showError(`Error agregando opción: ${response?.error || 'Error desconocido'}`);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
window.whatsappManager.showError('Error agregando opción: ' + error.message);
|
|
}
|
|
};
|
|
|
|
window.deleteMenuOption = async function(menuId, optionId) {
|
|
if (!confirm('¿Estás seguro de que deseas eliminar esta opción del menú?')) {
|
|
return;
|
|
}
|
|
|
|
console.log('Eliminando opción:', { menuId, optionId });
|
|
|
|
try {
|
|
const response = await window.whatsappManager.apiCall('delete_menu_option.php', {
|
|
method: 'POST',
|
|
body: {
|
|
menu_id: menuId,
|
|
option_id: optionId
|
|
}
|
|
});
|
|
|
|
if (response && response.success) {
|
|
window.whatsappManager.showSuccess('Opción eliminada correctamente');
|
|
|
|
// Cerrar modal actual
|
|
const viewModal = bootstrap.Modal.getInstance(document.getElementById('viewMenuOptionsModal'));
|
|
if (viewModal) viewModal.hide();
|
|
|
|
// Reabrir modal actualizado
|
|
setTimeout(async () => {
|
|
const menusResponse = await window.whatsappManager.apiCall('get_menus.php');
|
|
if (menusResponse && menusResponse.success) {
|
|
const menu = menusResponse.data.find(m => m.id == menuId);
|
|
if (menu) {
|
|
showMenuOptionsModal(menu);
|
|
}
|
|
}
|
|
}, 500);
|
|
} else {
|
|
window.whatsappManager.showError(`Error eliminando opción: ${response?.error || 'Error desconocido'}`);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
window.whatsappManager.showError('Error eliminando opción: ' + error.message);
|
|
}
|
|
};
|
|
|
|
window.testMenuPreview = async function(menuId) {
|
|
console.log('Mostrando vista previa del menú:', menuId);
|
|
|
|
try {
|
|
// Obtener datos del menú
|
|
const response = await window.whatsappManager.apiCall('get_menus.php');
|
|
|
|
if (response && response.success) {
|
|
const menu = response.data.find(m => m.id == menuId);
|
|
|
|
if (menu) {
|
|
showMenuPreviewModal(menu);
|
|
} else {
|
|
window.whatsappManager.showError('Menú no encontrado');
|
|
}
|
|
} else {
|
|
window.whatsappManager.showError('Error cargando datos del menú');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
window.whatsappManager.showError('Error mostrando vista previa: ' + error.message);
|
|
}
|
|
};
|
|
|
|
// Modal de vista previa del menú estilo WhatsApp
|
|
function showMenuPreviewModal(menuData) {
|
|
const options = menuData.options || [];
|
|
const welcomeMsg = menuData.welcome_message || `¡Hola! Bienvenido al ${menuData.title || menuData.name}`;
|
|
|
|
// Construir el mensaje del menú como se vería en WhatsApp
|
|
let menuMessage = `📋 *${menuData.title || menuData.name}*\n\n`;
|
|
|
|
if (menuData.description) {
|
|
menuMessage += `${menuData.description}\n\n`;
|
|
}
|
|
|
|
if (options.length > 0) {
|
|
menuMessage += '*Opciones disponibles:*\n\n';
|
|
options.forEach(option => {
|
|
const key = option.option_key || option.key || '?';
|
|
const text = option.option_text || option.text || 'Sin texto';
|
|
menuMessage += `${key}. ${text}\n`;
|
|
});
|
|
menuMessage += '\n💬 *Responde con el número de la opción que deseas*';
|
|
} else {
|
|
menuMessage += '⚠️ _Este menú no tiene opciones configuradas_';
|
|
}
|
|
|
|
const modalHtml = `
|
|
<div class="modal fade" id="menuPreviewModal" tabindex="-1">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-success text-white">
|
|
<h5 class="modal-title">
|
|
<i class="fab fa-whatsapp"></i> Vista Previa del Menú - Simulación WhatsApp
|
|
</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body p-0">
|
|
<div class="row g-0">
|
|
<!-- Panel de información -->
|
|
<div class="col-md-4 bg-light p-3 border-end">
|
|
<h6 class="fw-bold mb-3"><i class="fas fa-info-circle"></i> Información del Menú</h6>
|
|
|
|
<div class="mb-3">
|
|
<small class="text-muted d-block">ID del Menú</small>
|
|
<strong>${menuData.id}</strong>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<small class="text-muted d-block">Nombre/Clave</small>
|
|
<strong>${menuData.name || 'N/A'}</strong>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<small class="text-muted d-block">Estado</small>
|
|
<span class="badge bg-${menuData.status === 'active' || menuData.is_active ? 'success' : 'secondary'}">
|
|
${menuData.status === 'active' || menuData.is_active ? 'Activo' : 'Inactivo'}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<small class="text-muted d-block">Total de Opciones</small>
|
|
<strong>${options.length}</strong>
|
|
</div>
|
|
|
|
${options.length > 0 ? `
|
|
<hr>
|
|
<h6 class="fw-bold mb-2">Acciones Configuradas:</h6>
|
|
<ul class="list-unstyled small">
|
|
${options.map(opt => {
|
|
const action = opt.option_action || opt.action_type || 'message';
|
|
const icons = {
|
|
'message': '💬',
|
|
'menu': '📋',
|
|
'api_call': '🔌',
|
|
'end': '🚪'
|
|
};
|
|
return `<li class="mb-1">${icons[action] || '•'} ${opt.option_key || '?'}: <span class="badge bg-info">${action}</span></li>`;
|
|
}).join('')}
|
|
</ul>
|
|
` : ''}
|
|
</div>
|
|
|
|
<!-- Simulación de WhatsApp -->
|
|
<div class="col-md-8 p-0">
|
|
<div class="whatsapp-preview" style="background: #e5ddd5; min-height: 500px; max-height: 600px; overflow-y: auto; position: relative;">
|
|
<!-- Header de WhatsApp -->
|
|
<div class="whatsapp-header" style="background: #075e54; color: white; padding: 10px 15px; display: flex; align-items: center; gap: 10px;">
|
|
<div style="width: 40px; height: 40px; border-radius: 50%; background: #25d366; display: flex; align-items: center; justify-content: center;">
|
|
<i class="fas fa-robot"></i>
|
|
</div>
|
|
<div>
|
|
<div style="font-weight: bold;">Bot WhatsApp</div>
|
|
<div style="font-size: 12px; opacity: 0.8;">En línea</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chat -->
|
|
<div class="whatsapp-chat p-4" style="padding-bottom: 80px !important;">
|
|
<!-- Mensaje del bot -->
|
|
<div class="d-flex mb-3">
|
|
<div style="max-width: 80%; background: white; padding: 8px 12px; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,0.1);">
|
|
<div style="white-space: pre-wrap; font-size: 14px; line-height: 1.5;">${menuMessage.replace(/\*/g, '<strong>').replace(/\*\*/g, '</strong>')}</div>
|
|
<div style="text-align: right; font-size: 11px; color: #667781; margin-top: 4px;">
|
|
<i class="fas fa-check-double text-primary"></i> ${new Date().toLocaleTimeString('es', { hour: '2-digit', minute: '2-digit' })}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
${options.length > 0 ? `
|
|
<!-- Ejemplo de respuesta del usuario -->
|
|
<div class="d-flex justify-content-end mb-3">
|
|
<div style="max-width: 80%; background: #dcf8c6; padding: 8px 12px; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,0.1);">
|
|
<div style="font-size: 14px;">${options[0].option_key || '1'}</div>
|
|
<div style="text-align: right; font-size: 11px; color: #667781; margin-top: 4px;">
|
|
${new Date().toLocaleTimeString('es', { hour: '2-digit', minute: '2-digit' })}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Respuesta del bot a la opción -->
|
|
<div class="d-flex mb-3">
|
|
<div style="max-width: 80%; background: white; padding: 8px 12px; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,0.1);">
|
|
<div style="font-size: 14px; line-height: 1.5;">
|
|
${options[0].option_value || options[0].action_value || 'Respuesta de la opción ' + (options[0].option_key || '1')}
|
|
</div>
|
|
<div style="text-align: right; font-size: 11px; color: #667781; margin-top: 4px;">
|
|
<i class="fas fa-check-double text-primary"></i> ${new Date().toLocaleTimeString('es', { hour: '2-digit', minute: '2-digit' })}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
` : ''}
|
|
</div>
|
|
|
|
<!-- Input de WhatsApp -->
|
|
<div class="whatsapp-input" style="position: absolute; bottom: 0; left: 0; right: 0; background: #f0f0f0; padding: 10px; border-top: 1px solid #ccc;">
|
|
<div style="display: flex; align-items: center; gap: 8px; background: white; padding: 8px 12px; border-radius: 20px;">
|
|
<i class="far fa-smile text-muted"></i>
|
|
<input type="text" placeholder="Escribe un mensaje" style="border: none; outline: none; flex: 1; font-size: 14px;" disabled>
|
|
<i class="fas fa-paperclip text-muted"></i>
|
|
<i class="fas fa-microphone text-muted"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-outline-primary" onclick="copyMenuPreview('${menuMessage.replace(/'/g, "\\'")}')">
|
|
<i class="fas fa-copy"></i> Copiar Mensaje
|
|
</button>
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
|
|
<i class="fas fa-times"></i> Cerrar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// Remover modal anterior si existe
|
|
const existingModal = document.getElementById('menuPreviewModal');
|
|
if (existingModal) {
|
|
existingModal.remove();
|
|
}
|
|
|
|
document.body.insertAdjacentHTML('beforeend', modalHtml);
|
|
|
|
const modal = new bootstrap.Modal(document.getElementById('menuPreviewModal'));
|
|
modal.show();
|
|
}
|
|
|
|
// Función para copiar el mensaje de vista previa
|
|
window.copyMenuPreview = function(message) {
|
|
// Limpiar el mensaje de HTML
|
|
const cleanMessage = message.replace(/<[^>]*>/g, '');
|
|
|
|
navigator.clipboard.writeText(cleanMessage).then(() => {
|
|
window.whatsappManager.showSuccess('Mensaje copiado al portapapeles');
|
|
}).catch(err => {
|
|
window.whatsappManager.showError('Error al copiar: ' + err.message);
|
|
});
|
|
};
|
|
|
|
// Función para guardar nuevo menú desde el modal de index.php
|
|
window.saveNewMenu = async function() {
|
|
const menuName = document.getElementById('menu-name')?.value?.trim();
|
|
const menuDescription = document.getElementById('menu-description')?.value?.trim();
|
|
|
|
if (!menuName) {
|
|
window.whatsappManager.showError('El nombre del menú es obligatorio');
|
|
return;
|
|
}
|
|
|
|
console.log('Guardando nuevo menú:', { menuName, menuDescription });
|
|
|
|
// Generar clave del menú basada en el nombre
|
|
const menuKey = menuName.toLowerCase()
|
|
.replace(/[^\w\s]/g, '') // Remover caracteres especiales
|
|
.replace(/\s+/g, '_') // Reemplazar espacios con guiones bajos
|
|
.substring(0, 20); // Limitar longitud
|
|
|
|
const menuData = {
|
|
name: menuName,
|
|
menu_key: menuKey,
|
|
description: menuDescription,
|
|
welcome_message: `¡Hola! Bienvenido al ${menuName}. Por favor selecciona una opción:`,
|
|
status: 'active',
|
|
options: [] // Sin opciones inicialmente
|
|
};
|
|
|
|
try {
|
|
const response = await window.whatsappManager.apiCall('save_menu.php', {
|
|
method: 'POST',
|
|
body: menuData
|
|
});
|
|
|
|
if (response && response.success) {
|
|
window.whatsappManager.showSuccess('Menú creado correctamente');
|
|
|
|
// Limpiar formulario
|
|
document.getElementById('menu-name').value = '';
|
|
document.getElementById('menu-description').value = '';
|
|
|
|
// Cerrar modal
|
|
const modal = bootstrap.Modal.getInstance(document.getElementById('createMenuModal'));
|
|
if (modal) modal.hide();
|
|
|
|
// Recargar lista de menús si existe la función
|
|
setTimeout(() => {
|
|
if (window.whatsappManager.loadMenus) {
|
|
window.whatsappManager.loadMenus();
|
|
}
|
|
if (typeof loadMenusTest === 'function') {
|
|
loadMenusTest();
|
|
}
|
|
}, 500);
|
|
} else {
|
|
window.whatsappManager.showError(`Error creando menú: ${response?.error || 'Error desconocido'}`);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
window.whatsappManager.showError('Error creando menú: ' + error.message);
|
|
}
|
|
};
|
|
|
|
// ========================= FUNCIONES GLOBALES ADICIONALES =========================
|
|
|
|
// Función para refrescar datos del dashboard
|
|
window.refreshData = function() {
|
|
console.log('Refrescando datos del dashboard');
|
|
|
|
if (window.whatsappManager) {
|
|
window.whatsappManager.showInfo('Actualizando datos...');
|
|
|
|
// Recargar todas las secciones
|
|
if (window.whatsappManager.loadUsers) {
|
|
window.whatsappManager.loadUsers();
|
|
}
|
|
if (window.whatsappManager.loadMenus) {
|
|
window.whatsappManager.loadMenus();
|
|
}
|
|
if (window.whatsappManager.loadTemplates) {
|
|
window.whatsappManager.loadTemplates();
|
|
}
|
|
if (window.whatsappManager.loadAutoResponses) {
|
|
window.whatsappManager.loadAutoResponses();
|
|
}
|
|
|
|
setTimeout(() => {
|
|
window.whatsappManager.showSuccess('Datos actualizados correctamente');
|
|
}, 1000);
|
|
}
|
|
};
|
|
|
|
// Función para exportar usuarios
|
|
window.exportUsers = function() {
|
|
console.log('Exportando usuarios...');
|
|
|
|
if (window.whatsappManager) {
|
|
window.whatsappManager.showInfo('Preparando exportación de usuarios...');
|
|
|
|
// Realizar llamada a API de exportación
|
|
window.whatsappManager.apiCall('export_users.php')
|
|
.then(response => {
|
|
if (response && response.success) {
|
|
// Si la API devuelve datos para descargar
|
|
if (response.download_url) {
|
|
window.open(response.download_url, '_blank');
|
|
} else if (response.data) {
|
|
// Crear descarga directa de datos JSON
|
|
const dataStr = JSON.stringify(response.data, null, 2);
|
|
const dataBlob = new Blob([dataStr], { type: 'application/json' });
|
|
const url = URL.createObjectURL(dataBlob);
|
|
|
|
const link = document.createElement('a');
|
|
link.href = url;
|
|
link.download = `usuarios_export_${new Date().toISOString().split('T')[0]}.json`;
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
URL.revokeObjectURL(url);
|
|
}
|
|
|
|
window.whatsappManager.showSuccess('Usuarios exportados correctamente');
|
|
} else {
|
|
window.whatsappManager.showError(`Error exportando usuarios: ${response?.error || 'Error desconocido'}`);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error exportando usuarios:', error);
|
|
window.whatsappManager.showError('Error exportando usuarios: ' + error.message);
|
|
});
|
|
}
|
|
};
|
|
|
|
// Función para refrescar logs
|
|
window.refreshLogs = function() {
|
|
console.log('Refrescando logs...');
|
|
|
|
const logsContainer = document.getElementById('logs-container');
|
|
if (logsContainer) {
|
|
logsContainer.innerHTML = '<div class="text-center"><i class="fas fa-spinner fa-spin"></i> Cargando logs...</div>';
|
|
|
|
// Simular carga de logs (aquí se debería hacer una llamada a la API real)
|
|
setTimeout(() => {
|
|
logsContainer.innerHTML = `
|
|
<div class="log-entry mb-2">
|
|
<small class="text-muted">[${new Date().toLocaleString()}]</small>
|
|
<span class="text-info">INFO:</span> Logs actualizados correctamente
|
|
</div>
|
|
<div class="log-entry mb-2">
|
|
<small class="text-muted">[${new Date().toLocaleString()}]</small>
|
|
<span class="text-success">SUCCESS:</span> Sistema funcionando normalmente
|
|
</div>
|
|
`;
|
|
|
|
if (window.whatsappManager) {
|
|
window.whatsappManager.showSuccess('Logs actualizados');
|
|
}
|
|
}, 1000);
|
|
}
|
|
};
|
|
|
|
// Función para limpiar logs
|
|
window.clearLogs = async function() {
|
|
console.log('Limpiando logs...');
|
|
|
|
if (!confirm('¿Estás seguro de que quieres limpiar todos los logs? Esta acción no se puede deshacer.')) {
|
|
return;
|
|
}
|
|
|
|
if (window.whatsappManager) {
|
|
try {
|
|
const response = await window.whatsappManager.apiCall('clear_logs.php', {
|
|
method: 'POST',
|
|
body: { type: 'all' }
|
|
});
|
|
|
|
if (response && response.success) {
|
|
window.whatsappManager.showSuccess(
|
|
`Logs limpiados correctamente. ${response.deleted_count} registros eliminados.`
|
|
);
|
|
|
|
// Limpiar visualmente el contenedor
|
|
const logsContainer = document.getElementById('logs-container');
|
|
if (logsContainer) {
|
|
logsContainer.innerHTML = '<tr><td colspan="5" class="text-center text-muted"><i class="fas fa-trash"></i> No hay logs disponibles</td></tr>';
|
|
}
|
|
|
|
// Recargar logs
|
|
window.whatsappManager.loadLogs();
|
|
} else {
|
|
window.whatsappManager.showError(`Error al limpiar logs: ${response?.error || 'Error desconocido'}`);
|
|
}
|
|
} catch (error) {
|
|
window.whatsappManager.showError('Error al limpiar logs: ' + error.message);
|
|
}
|
|
} else {
|
|
alert('Error: Sistema no inicializado');
|
|
}
|
|
}; |