Sindbad~EG File Manager

<?php
// Check if chatbot is enabled
$chatbotEnabled = false;
try {
    require_once __DIR__ . '/../classes/ChatbotService.php';
    $chatbotService = new ChatbotService();
    $chatbotEnabled = $chatbotService->isEnabled();
    $chatbotSettings = $chatbotService->getAllSettings();
} catch (Exception $e) {
    error_log('Chatbot widget error: ' . $e->getMessage());
}

if (!$chatbotEnabled) {
    return;
}
?>

<!-- AI Chatbot Widget -->
<style>
#chatbot-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

#chatbot-button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, <?php echo $chatbotSettings['primary_color'] ?? '#1E40AF'; ?> 0%, #9333EA 100%);
    color: white;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    transition: all 0.3s ease;
}

#chatbot-button:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

#chatbot-button.open {
    transform: scale(0.9);
}

#chatbot-window {
    position: fixed;
    bottom: 100px;
    right: 20px;
    width: 380px;
    height: 550px;
    max-height: 80vh;
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 9998;
}

#chatbot-window.open {
    display: flex;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#chatbot-header {
    background: linear-gradient(135deg, <?php echo $chatbotSettings['primary_color'] ?? '#1E40AF'; ?> 0%, #9333EA 100%);
    color: white;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#chatbot-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

#chatbot-close {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
}

#chatbot-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

#chatbot-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: #f9fafb;
}

.chatbot-message {
    margin-bottom: 16px;
    display: flex;
    gap: 10px;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chatbot-message.user {
    flex-direction: row-reverse;
}

.chatbot-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.chatbot-message.bot .chatbot-avatar {
    background: linear-gradient(135deg, <?php echo $chatbotSettings['primary_color'] ?? '#1E40AF'; ?> 0%, #9333EA 100%);
    color: white;
}

.chatbot-message.user .chatbot-avatar {
    background: #e5e7eb;
}

.chatbot-bubble {
    max-width: 70%;
    padding: 12px 16px;
    border-radius: 16px;
    word-wrap: break-word;
}

.chatbot-message.bot .chatbot-bubble {
    background: white;
    color: #1f2937;
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.chatbot-message.user .chatbot-bubble {
    background: linear-gradient(135deg, <?php echo $chatbotSettings['primary_color'] ?? '#1E40AF'; ?> 0%, #9333EA 100%);
    color: white;
    border-bottom-right-radius: 4px;
}

.chatbot-typing {
    display: none;
    padding: 12px 16px;
    background: white;
    border-radius: 16px;
    border-bottom-left-radius: 4px;
    width: fit-content;
}

.chatbot-typing.active {
    display: block;
}

.chatbot-typing-dots {
    display: flex;
    gap: 4px;
}

.chatbot-typing-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9ca3af;
    animation: typing 1.4s infinite;
}

.chatbot-typing-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.chatbot-typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing {
    0%, 60%, 100% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-10px);
    }
}

#chatbot-input-area {
    padding: 16px;
    background: white;
    border-top: 1px solid #e5e7eb;
}

#chatbot-input-form {
    display: flex;
    gap: 8px;
}

#chatbot-input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 24px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

#chatbot-input:focus {
    border-color: <?php echo $chatbotSettings['primary_color'] ?? '#1E40AF'; ?>;
}

#chatbot-send {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, <?php echo $chatbotSettings['primary_color'] ?? '#1E40AF'; ?> 0%, #9333EA 100%);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

#chatbot-send:hover {
    transform: scale(1.1);
}

#chatbot-send:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    #chatbot-window {
        width: calc(100% - 40px);
        height: calc(100% - 140px);
        bottom: 100px;
        right: 20px;
        left: 20px;
        max-height: none;
    }
}
</style>

<div id="chatbot-widget">
    <!-- Chat Button -->
    <button id="chatbot-button" aria-label="Open chatbot">
        <?php echo $chatbotSettings['bot_avatar'] ?? '🤖'; ?>
    </button>

    <!-- Chat Window -->
    <div id="chatbot-window">
        <!-- Header -->
        <div id="chatbot-header">
            <h3><?php echo htmlspecialchars($chatbotSettings['bot_name'] ?? 'Church Assistant'); ?></h3>
            <button id="chatbot-close" aria-label="Close chatbot">&times;</button>
        </div>

        <!-- Messages Area -->
        <div id="chatbot-messages">
            <!-- Welcome message -->
            <div class="chatbot-message bot">
                <div class="chatbot-avatar"><?php echo $chatbotSettings['bot_avatar'] ?? '🤖'; ?></div>
                <div class="chatbot-bubble">
                    <?php echo htmlspecialchars($chatbotSettings['welcome_message'] ?? 'Hello! How can I help you today?'); ?>
                </div>
            </div>

            <!-- Typing indicator -->
            <div class="chatbot-message bot">
                <div class="chatbot-avatar"><?php echo $chatbotSettings['bot_avatar'] ?? '🤖'; ?></div>
                <div class="chatbot-typing">
                    <div class="chatbot-typing-dots">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Input Area -->
        <div id="chatbot-input-area">
            <form id="chatbot-input-form">
                <input type="text" id="chatbot-input" placeholder="<?php echo htmlspecialchars($chatbotSettings['placeholder_text'] ?? 'Type your message...'); ?>" autocomplete="off">
                <button type="submit" id="chatbot-send" aria-label="Send message">
                    <i class="fas fa-paper-plane"></i>
                </button>
            </form>
        </div>
    </div>
</div>

<script>
(function() {
    const widget = document.getElementById('chatbot-widget');
    const button = document.getElementById('chatbot-button');
    const window = document.getElementById('chatbot-window');
    const closeBtn = document.getElementById('chatbot-close');
    const messagesArea = document.getElementById('chatbot-messages');
    const inputForm = document.getElementById('chatbot-input-form');
    const input = document.getElementById('chatbot-input');
    const sendBtn = document.getElementById('chatbot-send');
    const typingIndicator = document.querySelector('.chatbot-typing');
    
    let sessionId = 'chatbot_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
    let conversationId = null;
    
    // Toggle chat window
    button.addEventListener('click', () => {
        window.classList.toggle('open');
        button.classList.toggle('open');
        if (window.classList.contains('open')) {
            input.focus();
            loadHistory();
        }
    });
    
    closeBtn.addEventListener('click', () => {
        window.classList.remove('open');
        button.classList.remove('open');
    });
    
    // Load conversation history
    function loadHistory() {
        fetch('<?php echo BASE_URL; ?>/api/chatbot.php', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                action: 'get_history',
                session_id: sessionId
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success && data.history.length > 1) {
                // Clear existing messages except welcome
                messagesArea.innerHTML = '';
                
                data.history.forEach(msg => {
                    addMessage(msg.message, msg.message_type, false);
                });
            }
        })
        .catch(error => console.error('Error loading history:', error));
    }
    
    // Send message
    inputForm.addEventListener('submit', (e) => {
        e.preventDefault();
        
        const message = input.value.trim();
        if (!message) return;
        
        // Add user message
        addMessage(message, 'user');
        input.value = '';
        sendBtn.disabled = true;
        
        // Show typing indicator
        typingIndicator.classList.add('active');
        scrollToBottom();
        
        // Send to backend
        setTimeout(() => {
            fetch('<?php echo BASE_URL; ?>/api/chatbot.php', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({
                    action: 'send_message',
                    message: message,
                    session_id: sessionId
                })
            })
            .then(response => response.json())
            .then(data => {
                typingIndicator.classList.remove('active');
                sendBtn.disabled = false;
                
                if (data.success) {
                    conversationId = data.conversation_id;
                    addMessage(data.response, 'bot');
                } else {
                    addMessage('Sorry, I encountered an error. Please try again.', 'bot');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                typingIndicator.classList.remove('active');
                sendBtn.disabled = false;
                addMessage('Sorry, I couldn\'t connect. Please check your internet connection.', 'bot');
            });
        }, <?php echo $chatbotSettings['response_delay'] ?? 500; ?>);
    });
    
    // Add message to chat
    function addMessage(text, type, scroll = true) {
        const messageDiv = document.createElement('div');
        messageDiv.className = `chatbot-message ${type}`;
        
        const avatar = document.createElement('div');
        avatar.className = 'chatbot-avatar';
        avatar.textContent = type === 'bot' ? '<?php echo $chatbotSettings['bot_avatar'] ?? '🤖'; ?>' : '👤';
        
        const bubble = document.createElement('div');
        bubble.className = 'chatbot-bubble';
        bubble.textContent = text;
        
        messageDiv.appendChild(avatar);
        messageDiv.appendChild(bubble);
        
        // Insert before typing indicator
        messagesArea.insertBefore(messageDiv, typingIndicator.parentElement);
        
        if (scroll) {
            scrollToBottom();
        }
    }
    
    // Scroll to bottom
    function scrollToBottom() {
        messagesArea.scrollTop = messagesArea.scrollHeight;
    }
    
    // Auto-scroll on new messages
    const observer = new MutationObserver(scrollToBottom);
    observer.observe(messagesArea, { childList: true });
})();
</script>