<?php

// chatbot.php - Include this in your footer to show floating chatbot



if (!isset($_SESSION['user_id'])) {

    return; // Don't show chatbot if not logged in

}

?>

<!-- AI Chatbot Floating Widget -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">

<style>

    .chatbot-container {

        position: fixed;

        bottom: 20px;

        right: 20px;

        z-index: 9999;

        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    }

    

    .chatbot-button {

        width: 60px;

        height: 60px;

        border-radius: 50%;

        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

        color: white;

        border: none;

        cursor: pointer;

        box-shadow: 0 4px 15px rgba(0,0,0,0.2);

        transition: all 0.3s ease;

        animation: pulse 2s infinite;

    }

    

    @keyframes pulse {

        0% { transform: scale(1); }

        50% { transform: scale(1.1); }

        100% { transform: scale(1); }

    }

    

    .chatbot-button:hover {

        transform: scale(1.15);

        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);

    }

    

    .chatbot-window {

        position: absolute;

        bottom: 80px;

        right: 0;

        width: 350px;

        height: 500px;

        background: white;

        border-radius: 15px;

        box-shadow: 0 10px 40px rgba(0,0,0,0.2);

        display: none;

        flex-direction: column;

        overflow: hidden;

        animation: slideIn 0.3s ease;

    }

    

    @keyframes slideIn {

        from {

            opacity: 0;

            transform: translateY(20px);

        }

        to {

            opacity: 1;

            transform: translateY(0);

        }

    }

    

    .chatbot-header {

        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

        color: white;

        padding: 15px;

        display: flex;

        justify-content: space-between;

        align-items: center;

    }

    

    .chatbot-header h5 {

        margin: 0;

        font-size: 16px;

        display: flex;

        align-items: center;

        gap: 8px;

    }

    

    .chatbot-header i {

        font-size: 20px;

    }

    

    .chatbot-close {

        background: none;

        border: none;

        color: white;

        cursor: pointer;

        font-size: 18px;

    }

    

    .chatbot-messages {

        flex: 1;

        padding: 15px;

        overflow-y: auto;

        background: #f8f9fa;

    }

    

    .message {

        margin-bottom: 15px;

        display: flex;

        flex-direction: column;

    }

    

    .message.bot {

        align-items: flex-start;

    }

    

    .message.user {

        align-items: flex-end;

    }

    

    .message-content {

        max-width: 80%;

        padding: 10px 15px;

        border-radius: 15px;

        font-size: 13px;

        line-height: 1.4;

    }

    

    .bot .message-content {

        background: white;

        color: #333;

        border-bottom-left-radius: 5px;

        box-shadow: 0 2px 5px rgba(0,0,0,0.1);

    }

    

    .user .message-content {

        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

        color: white;

        border-bottom-right-radius: 5px;

    }

    

    .message-time {

        font-size: 10px;

        color: #999;

        margin-top: 5px;

    }

    

    .chatbot-input {

        padding: 15px;

        background: white;

        border-top: 1px solid #dee2e6;

        display: flex;

        gap: 10px;

    }

    

    .message-content {

    max-width: 85%;

    padding: 12px 16px;

    border-radius: 18px;

    font-size: 13px;

    line-height: 1.5;

    box-shadow: 0 2px 5px rgba(0,0,0,0.1);

}



.bot .message-content {

    background: white;

    color: #333;

    border-bottom-left-radius: 5px;

}



.bot .message-content table {

    width: 100%;

    border-collapse: collapse;

    margin: 8px 0;

}



.bot .message-content th {

    background: #f8f9fa;

    padding: 6px;

    font-size: 11px;

    text-align: left;

}



.bot .message-content td {

    padding: 6px;

    border-bottom: 1px solid #eee;

    font-size: 11px;

}



.bot .message-content .badge {

    display: inline-block;

    padding: 2px 8px;

    border-radius: 12px;

    font-size: 10px;

    font-weight: bold;

}



.bot .message-content .badge-success {

    background: #d4edda;

    color: #155724;

}



.bot .message-content .badge-warning {

    background: #fff3cd;

    color: #856404;

}



.bot .message-content .badge-danger {

    background: #f8d7da;

    color: #721c24;

}



.bot .message-content .progress {

    height: 20px;

    background: #ecf0f1;

    border-radius: 10px;

    overflow: hidden;

    margin: 5px 0;

}



.bot .message-content .progress-bar {

    height: 100%;

    background: linear-gradient(135deg, #667eea, #764ba2);

    color: white;

    text-align: center;

    font-size: 10px;

    line-height: 20px;

}



.bot .message-content .stat-card {

    background: linear-gradient(135deg, #667eea, #764ba2);

    color: white;

    padding: 10px;

    border-radius: 8px;

    text-align: center;

    margin: 5px 0;

}



.bot .message-content .stat-card small {

    opacity: 0.9;

    font-size: 10px;

}



.bot .message-content .stat-card .value {

    font-size: 18px;

    font-weight: bold;

}

    

    .chatbot-input input {

        flex: 1;

        padding: 10px;

        border: 1px solid #dee2e6;

        border-radius: 20px;

        outline: none;

        font-size: 13px;

    }

    

    .chatbot-input input:focus {

        border-color: #667eea;

        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);

    }

    

    .chatbot-input button {

        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

        color: white;

        border: none;

        width: 40px;

        height: 40px;

        border-radius: 50%;

        cursor: pointer;

        transition: transform 0.2s;

    }

    

    .chatbot-input button:hover {

        transform: scale(1.1);

    }

    

    .typing-indicator {

        display: flex;

        gap: 5px;

        padding: 10px 15px;

        background: white;

        border-radius: 15px;

        width: fit-content;

    }

    

    .typing-indicator span {

        width: 8px;

        height: 8px;

        background: #999;

        border-radius: 50%;

        animation: typing 1s infinite;

    }

    

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

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

    

    @keyframes typing {

        0%, 100% { transform: translateY(0); }

        50% { transform: translateY(-5px); }

    }

    

    .quick-replies {

        display: flex;

        flex-wrap: wrap;

        gap: 8px;

        margin-top: 10px;

    }

    

    .quick-reply-btn {

        background: #e9ecef;

        border: none;

        padding: 8px 12px;

        border-radius: 20px;

        font-size: 12px;

        color: #495057;

        cursor: pointer;

        transition: all 0.2s;

    }

    

    .quick-reply-btn:hover {

        background: #667eea;

        color: white;

    }

    

    .chatbot-features {

        display: flex;

        justify-content: space-around;

        padding: 10px;

        background: #f8f9fa;

        border-top: 1px solid #dee2e6;

    }

    

    .feature-icon {

        text-align: center;

        color: #667eea;

        cursor: pointer;

        transition: transform 0.2s;

    }

    

    .feature-icon:hover {

        transform: scale(1.1);

    }

    

    .feature-icon i {

        font-size: 20px;

    }

    

    .feature-icon span {

        display: block;

        font-size: 10px;

        margin-top: 5px;

        color: #666;

    }

</style>



<div class="chatbot-container">

    <!-- Chat Button -->

    <button class="chatbot-button" onclick="toggleChatbot()">

        <i class="fas fa-robot fa-2x"></i>

    </button>

    

    <!-- Chat Window -->

    <div class="chatbot-window" id="chatbotWindow">

        <div class="chatbot-header">

            <h5>

                <i class="fas fa-robot"></i>

                AI Assistant

                <span style="font-size: 10px; background: rgba(255,255,255,0.2); padding: 2px 8px; border-radius: 12px;">v2.0</span>

            </h5>

            <button class="chatbot-close" onclick="toggleChatbot()">

                <i class="fas fa-times"></i>

            </button>

        </div>

        

        <div class="chatbot-messages" id="chatMessages">

            <!-- Messages will appear here -->

            <div class="message bot">

                <div class="message-content">

                    👋 Hello! I'm your AI assistant. How can I help you today?

                </div>

                <div class="message-time">Just now</div>

            </div>

            

            <!-- Quick Reply Options -->

            <div class="quick-replies" id="quickReplies">

                <button class="quick-reply-btn" onclick="sendQuickReply('Show fee reminders')">

                    <i class="fas fa-bell me-1"></i> Fee Reminders

                </button>

                <button class="quick-reply-btn" onclick="sendQuickReply('Analyze reports')">

                    <i class="fas fa-chart-bar me-1"></i> Analyze Reports

                </button>

                <button class="quick-reply-btn" onclick="sendQuickReply('Predict payments')">

                    <i class="fas fa-chart-line me-1"></i> Predictions

                </button>

                <button class="quick-reply-btn" onclick="sendQuickReply('At risk students')">

                    <i class="fas fa-exclamation-triangle me-1"></i> At Risk

                </button>

            </div>

        </div>

        

        <!-- Feature Icons -->

        <div class="chatbot-features">

            <div class="feature-icon" onclick="triggerFeature('reminders')" title="Automated Fee Reminders">

                <i class="fas fa-bell"></i>

                <span>Reminders</span>

            </div>

            <div class="feature-icon" onclick="triggerFeature('analysis')" title="Smart Report Analysis">

                <i class="fas fa-chart-pie"></i>

                <span>Analysis</span>

            </div>

            <div class="feature-icon" onclick="triggerFeature('predict')" title="Predictive Analytics">

                <i class="fas fa-chart-line"></i>

                <span>Predict</span>

            </div>

            <div class="feature-icon" onclick="triggerFeature('parents')" title="Parent Queries">

                <i class="fas fa-users"></i>

                <span>Parents</span>

            </div>

            <div class="feature-icon" onclick="triggerFeature('comments')" title="Automated Comments">

                <i class="fas fa-comment"></i>

                <span>Comments</span>

            </div>

        </div>

        

        <!-- Input Area -->

        <div class="chatbot-input">

            <input type="text" id="chatInput" placeholder="Type your question..." onkeypress="if(event.key==='Enter') sendMessage()">

            <button onclick="sendMessage()">

                <i class="fas fa-paper-plane"></i>

            </button>

        </div>

    </div>

</div>



<script>

let isTyping = false;



function toggleChatbot() {

    const window = document.getElementById('chatbotWindow');

    if (window.style.display === 'flex') {

        window.style.display = 'none';

    } else {

        window.style.display = 'flex';

    }

}



function addMessage(text, isUser = false) {

    const messages = document.getElementById('chatMessages');

    const messageDiv = document.createElement('div');

    messageDiv.className = `message ${isUser ? 'user' : 'bot'}`;

    

    const contentDiv = document.createElement('div');

    contentDiv.className = 'message-content';

    contentDiv.innerHTML = text; // Use innerHTML instead of textContent

    

    const timeDiv = document.createElement('div');

    timeDiv.className = 'message-time';

    timeDiv.textContent = 'Just now';

    

    messageDiv.appendChild(contentDiv);

    messageDiv.appendChild(timeDiv);

    messages.insertBefore(messageDiv, document.getElementById('quickReplies'));

    

    // Scroll to bottom

    messages.scrollTop = messages.scrollHeight;

}



function showTyping() {

    if (isTyping) return;

    isTyping = true;

    

    const messages = document.getElementById('chatMessages');

    const typingDiv = document.createElement('div');

    typingDiv.className = 'message bot';

    typingDiv.id = 'typingIndicator';

    

    const indicator = document.createElement('div');

    indicator.className = 'typing-indicator';

    indicator.innerHTML = '<span></span><span></span><span></span>';

    

    typingDiv.appendChild(indicator);

    messages.insertBefore(typingDiv, document.getElementById('quickReplies'));

    messages.scrollTop = messages.scrollHeight;

}



function hideTyping() {

    const typing = document.getElementById('typingIndicator');

    if (typing) typing.remove();

    isTyping = false;

}



function sendMessage() {

    const input = document.getElementById('chatInput');

    const message = input.value.trim();

    

    if (message === '') return;

    

    addMessage(message, true);

    input.value = '';

    

    // Show typing indicator

    showTyping();

    

    // Send to AI

    setTimeout(() => {

        processAIRequest(message);

    }, 1000);

}



function sendQuickReply(message) {

    addMessage(message, true);

    showTyping();

    setTimeout(() => {

        processAIRequest(message);

    }, 1000);

}



function triggerFeature(feature) {

    const features = {

        'reminders': 'Show me automated fee reminders for today',

        'analysis': 'Analyze the current financial reports',

        'predict': 'Show payment predictions for next month',

        'parents': 'What are common parent queries?',

        'comments': 'Generate automated report comments'

    };

    

    sendQuickReply(features[feature]);

}



function processAIRequest(message) {

    $.ajax({

        url: 'ajax/ai_chatbot.php',

        type: 'POST',

        data: { message: message },

        dataType: 'json',

        success: function(response) {

            hideTyping();

            addMessage(response.message);

            

            // Show quick actions if available

            if (response.actions && response.actions.length > 0) {

                setTimeout(() => {

                    const actions = response.actions.map(action => 

                        `<button class="quick-reply-btn" onclick="sendQuickReply('${action}')">${action}</button>`

                    ).join('');

                    addMessage('Suggested actions:<br>' + actions);

                }, 500);

            }

        },

        error: function() {

            hideTyping();

            addMessage('Sorry, I encountered an error. Please try again.');

        }

    });

}

</script>