/**
 * Advanced Educational Tutor Bot JavaScript
 * Author: RSK World (https://rskworld.in)
 * Founded by: Molla Samser
 * Designer & Tester: Rima Khatun
 * Contact: info@rskworld.com, +91 93305 39277
 * Year: 2026
 */

// Global variables
let currentSessionId = null;
let isTyping = false;
let isRecording = false;
let mediaRecorder = null;
let audioChunks = [];
let sessionStartTime = Date.now();
let charts = {};

// Initialize the application
document.addEventListener('DOMContentLoaded', function() {
    console.log('Advanced Educational Tutor Bot - © 2026 RSK World');
    console.log('Founded by Molla Samser | Designer & Tester: Rima Khatun');
    
    // Focus on message input
    document.getElementById('messageInput').focus();
    
    // Start session timer
    updateSessionTimer();
    
    // Load initial data
    loadAnalytics();
    
    // Add welcome message
    setTimeout(() => {
        addBotMessage('Hello! I\'m your Advanced Educational Tutor Bot. I can help you learn with AI-powered tutoring, multi-language support, voice input, and advanced analytics. What would you like to learn today?');
    }, 1000);
});

// Enhanced send message function
async function sendMessage() {
    const messageInput = document.getElementById('messageInput');
    const message = messageInput.value.trim();
    
    if (!message || isTyping) return;
    
    const subject = document.getElementById('subject').value || 'General';
    const difficulty = document.getElementById('difficulty').value || 'Intermediate';
    const language = document.getElementById('language').value || 'en';
    
    // Add user message to chat
    addUserMessage(message);
    
    // Clear input
    messageInput.value = '';
    
    // Show typing indicator
    showTypingIndicator();
    
    try {
        // Send message to backend
        const response = await fetch('/chat', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                message: message,
                subject: subject,
                difficulty: difficulty,
                language: language
            })
        });
        
        const data = await response.json();
        
        // Hide typing indicator
        hideTypingIndicator();
        
        if (data.response) {
            addBotMessage(data.response);
            
            // Show additional information if available
            if (data.topics && data.topics.length > 0) {
                addBotMessage(`📚 **Topics covered:** ${data.topics.join(', ')}`);
            }
            
            if (data.suggested_resources && data.suggested_resources.length > 0) {
                let resourceText = '📖 **Suggested Resources:**\n';
                data.suggested_resources.forEach(resource => {
                    resourceText += `• ${resource.title}: ${resource.description}\n`;
                });
                addBotMessage(resourceText);
            }
            
            // Update session info
            if (data.session_id) {
                currentSessionId = data.session_id;
            }
            
            // Update analytics
            updateSessionInfo(data.tokens_used, data.response_time);
            
        } else {
            addBotMessage('Sorry, I encountered an error. Please try again.');
        }
        
    } catch (error) {
        hideTypingIndicator();
        addBotMessage('Connection error. Please check your internet connection and try again.');
        console.error('Error:', error);
    }
}

// Add user message to chat
function addUserMessage(message) {
    const chatMessages = document.getElementById('chatMessages');
    const messageElement = document.createElement('div');
    messageElement.className = 'message user-message';
    messageElement.innerHTML = `
        <div>${escapeHtml(message)}</div>
        <div class="time">${getCurrentTime()}</div>
    `;
    chatMessages.appendChild(messageElement);
    scrollToBottom();
}

// Add bot message to chat
function addBotMessage(message) {
    const chatMessages = document.getElementById('chatMessages');
    const messageElement = document.createElement('div');
    messageElement.className = 'message bot-message';
    messageElement.innerHTML = `
        <div>${message}</div>
        <div class="time">${getCurrentTime()}</div>
    `;
    chatMessages.appendChild(messageElement);
    scrollToBottom();
}

// Show typing indicator
function showTypingIndicator() {
    isTyping = true;
    const chatMessages = document.getElementById('chatMessages');
    const typingElement = document.createElement('div');
    typingElement.className = 'typing-indicator';
    typingElement.id = 'typingIndicator';
    typingElement.innerHTML = `
        <span></span>
        <span></span>
        <span></span>
    `;
    chatMessages.appendChild(typingElement);
    scrollToBottom();
}

// Hide typing indicator
function hideTypingIndicator() {
    isTyping = false;
    const typingIndicator = document.getElementById('typingIndicator');
    if (typingIndicator) {
        typingIndicator.remove();
    }
}

// Scroll to bottom of chat
function scrollToBottom() {
    const chatMessages = document.getElementById('chatMessages');
    chatMessages.scrollTop = chatMessages.scrollHeight;
}

// Get current time
function getCurrentTime() {
    const now = new Date();
    return now.toLocaleTimeString('en-US', { 
        hour: '2-digit', 
        minute: '2-digit' 
    });
}

// Escape HTML to prevent XSS
function escapeHtml(text) {
    const map = {
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#039;'
    };
    return text.replace(/[&<>"']/g, m => map[m]);
}

// Show learning progress
async function showProgress() {
    const modal = new bootstrap.Modal(document.getElementById('progressModal'));
    const progressContent = document.getElementById('progressContent');
    
    // Show loading
    progressContent.innerHTML = `
        <div class="text-center">
            <div class="spinner-border" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            <p class="mt-2">Loading your learning progress...</p>
        </div>
    `;
    
    modal.show();
    
    try {
        const response = await fetch('/progress');
        const data = await response.json();
        
        if (data.progress && data.progress.length > 0) {
            let progressHtml = '<h6>Your Learning Progress</h6>';
            
            data.progress.forEach(item => {
                const percentage = Math.min((item[2] / 10) * 100, 100); // Assume 10 questions per subject as goal
                progressHtml += `
                    <div class="progress-item">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <strong>${item[0]}</strong>
                            <span class="badge bg-info">${item[2]} questions</span>
                        </div>
                        <div class="progress">
                            <div class="progress-bar" style="width: ${percentage}%"></div>
                        </div>
                        <small class="text-muted">${item[1]} sessions</small>
                    </div>
                `;
            });
            
            progressContent.innerHTML = progressHtml;
        } else {
            progressContent.innerHTML = `
                <div class="text-center text-muted">
                    <i class="fas fa-chart-line fa-3x mb-3"></i>
                    <p>No learning progress yet. Start asking questions to see your progress!</p>
                </div>
            `;
        }
        
    } catch (error) {
        progressContent.innerHTML = `
            <div class="alert alert-danger">
                <i class="fas fa-exclamation-triangle me-2"></i>
                Error loading progress data. Please try again.
            </div>
        `;
        console.error('Error loading progress:', error);
    }
}

// Show chat history
async function showHistory() {
    const modal = new bootstrap.Modal(document.getElementById('historyModal'));
    const historyContent = document.getElementById('historyContent');
    
    // Show loading
    historyContent.innerHTML = `
        <div class="text-center">
            <div class="spinner-border" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            <p class="mt-2">Loading your chat history...</p>
        </div>
    `;
    
    modal.show();
    
    try {
        const response = await fetch('/history');
        const data = await response.json();
        
        if (data.history && data.history.length > 0) {
            let historyHtml = '<h6>Recent Conversations</h6>';
            
            data.history.forEach(item => {
                const date = new Date(item[3]).toLocaleString();
                historyHtml += `
                    <div class="history-item">
                        <div class="history-question">
                            <i class="fas fa-user me-2"></i>
                            <strong>Q:</strong> ${escapeHtml(item[0])}
                        </div>
                        <div class="history-answer">
                            <i class="fas fa-robot me-2"></i>
                            <strong>A:</strong> ${item[1]}
                        </div>
                        <div class="history-meta">
                            <i class="fas fa-book me-2"></i>Subject: ${item[2]}
                            <i class="fas fa-clock me-2 ms-3"></i>${date}
                        </div>
                    </div>
                `;
            });
            
            historyContent.innerHTML = historyHtml;
        } else {
            historyContent.innerHTML = `
                <div class="text-center text-muted">
                    <i class="fas fa-history fa-3x mb-3"></i>
                    <p>No chat history yet. Start a conversation to see your history!</p>
                </div>
            `;
        }
        
    } catch (error) {
        historyContent.innerHTML = `
            <div class="alert alert-danger">
                <i class="fas fa-exclamation-triangle me-2"></i>
                Error loading history. Please try again.
            </div>
        `;
        console.error('Error loading history:', error);
    }
}

// Voice input functionality
async function toggleVoiceInput() {
    const voiceBtn = document.getElementById('voiceBtn');
    const voiceBtnText = document.getElementById('voiceBtnText');
    
    if (!isRecording) {
        try {
            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
            mediaRecorder = new MediaRecorder(stream);
            audioChunks = [];
            
            mediaRecorder.ondataavailable = event => {
                audioChunks.push(event.data);
            };
            
            mediaRecorder.onstop = async () => {
                const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
                const audioFile = new File([audioBlob], 'voice_input.wav', { type: 'audio/wav' });
                
                // Send to backend for transcription
                const formData = new FormData();
                formData.append('audio', audioFile);
                
                try {
                    const response = await fetch('/voice-input', {
                        method: 'POST',
                        body: formData
                    });
                    
                    const data = await response.json();
                    
                    if (data.text) {
                        document.getElementById('messageInput').value = data.text;
                        voiceBtnText.textContent = 'Start Recording';
                        voiceBtn.classList.remove('btn-danger');
                        voiceBtn.classList.add('btn-outline-primary');
                    } else {
                        alert('Could not transcribe audio. Please try again.');
                    }
                } catch (error) {
                    console.error('Voice transcription error:', error);
                    alert('Voice processing failed. Please try again.');
                }
                
                // Stop all tracks
                stream.getTracks().forEach(track => track.stop());
            };
            
            mediaRecorder.start();
            isRecording = true;
            voiceBtnText.textContent = 'Stop Recording';
            voiceBtn.classList.remove('btn-outline-primary');
            voiceBtn.classList.add('btn-danger');
            
        } catch (error) {
            console.error('Microphone access error:', error);
            alert('Could not access microphone. Please check your permissions.');
        }
    } else {
        mediaRecorder.stop();
        isRecording = false;
    }
}

// File upload functionality
async function uploadFile() {
    const fileInput = document.getElementById('fileUpload');
    const file = fileInput.files[0];
    
    if (!file) {
        alert('Please select a file to upload.');
        return;
    }
    
    const formData = new FormData();
    formData.append('file', file);
    
    try {
        const response = await fetch('/upload-file', {
            method: 'POST',
            body: formData
        });
        
        const data = await response.json();
        
        if (data.message) {
            addBotMessage(`📄 **File uploaded successfully:** ${data.filename}`);
        } else {
            addBotMessage(`❌ **Upload failed:** ${data.error}`);
        }
        
    } catch (error) {
        console.error('File upload error:', error);
        addBotMessage('File upload failed. Please try again.');
    }
    
    fileInput.value = '';
}

// Learning path functionality
async function loadLearningPath() {
    const subject = document.getElementById('pathSubject').value;
    const difficulty = document.getElementById('pathDifficulty').value;
    
    if (!subject) {
        document.getElementById('learningPathContent').innerHTML = `
            <div class="text-center text-muted">
                <i class="fas fa-route fa-3x mb-3"></i>
                <p>Select a subject to view your learning path.</p>
            </div>
        `;
        return;
    }
    
    try {
        const response = await fetch(`/learning-path/${subject}/${difficulty}`);
        const data = await response.json();
        
        const pathContent = document.getElementById('learningPathContent');
        
        if (data.learning_path && data.learning_path.length > 0) {
            let pathHtml = '<h6>Your Learning Path:</h6><div class="timeline">';
            
            data.learning_path.forEach((topic, index) => {
                pathHtml += `
                    <div class="timeline-item">
                        <div class="timeline-marker">${index + 1}</div>
                        <div class="timeline-content">
                            <h6>${topic}</h6>
                            <p class="text-muted">Master this topic before moving to the next one.</p>
                            <button class="btn btn-sm btn-outline-primary" onclick="startLearning('${topic}', '${subject}', '${difficulty}')">
                                <i class="fas fa-play me-1"></i>Start Learning
                            </button>
                        </div>
                    </div>
                `;
            });
            
            pathHtml += '</div>';
            pathContent.innerHTML = pathHtml;
        } else {
            pathContent.innerHTML = `
                <div class="text-center text-muted">
                    <i class="fas fa-exclamation-triangle fa-3x mb-3"></i>
                    <p>No learning path available for this combination.</p>
                </div>
            `;
        }
        
    } catch (error) {
        console.error('Error loading learning path:', error);
        document.getElementById('learningPathContent').innerHTML = `
            <div class="alert alert-danger">
                Failed to load learning path. Please try again.
            </div>
        `;
    }
}

// Practice questions functionality
async function generatePracticeQuestions() {
    const subject = document.getElementById('practiceSubject').value;
    const topic = document.getElementById('practiceTopic').value || 'General';
    const difficulty = document.getElementById('practiceDifficulty').value;
    const count = parseInt(document.getElementById('questionCount').value);
    
    try {
        const response = await fetch('/practice-questions', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                subject: subject,
                topic: topic,
                difficulty: difficulty,
                count: count
            })
        });
        
        const data = await response.json();
        
        const practiceContent = document.getElementById('practiceQuestions');
        
        if (data.questions && data.questions.length > 0) {
            let questionsHtml = `<h6>Practice Questions - ${subject} (${topic})</h6>`;
            
            data.questions.forEach((question, index) => {
                questionsHtml += `
                    <div class="card mb-3">
                        <div class="card-header">
                            <strong>Question ${index + 1}:</strong> ${question.question}
                        </div>
                        <div class="card-body">
                            ${question.options ? `
                                <div class="row">
                                    ${question.options.map((option, i) => `
                                        <div class="col-md-6 mb-2">
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="q${index}" id="q${index}_${i}" value="${option}">
                                                <label class="form-check-label" for="q${index}_${i}">
                                                    ${option}
                                                </label>
                                            </div>
                                        </div>
                                    `).join('')}
                                </div>
                            ` : `
                                <textarea class="form-control" rows="3" placeholder="Type your answer here..." id="answer_${index}"></textarea>
                            `}
                            <div class="mt-3">
                                <button class="btn btn-sm btn-primary" onclick="checkAnswer(${index}, '${question.answer}')">
                                    <i class="fas fa-check me-1"></i>Check Answer
                                </button>
                                <button class="btn btn-sm btn-outline-secondary ms-2" onclick="showSolution(${index}, '${question.explanation}')">
                                    <i class="fas fa-lightbulb me-1"></i>Show Solution
                                </button>
                            </div>
                            <div id="feedback_${index}" class="mt-3"></div>
                        </div>
                    </div>
                `;
            });
            
            practiceContent.innerHTML = questionsHtml;
        } else {
            practiceContent.innerHTML = `
                <div class="alert alert-warning">
                    Could not generate practice questions. Please try different settings.
                </div>
            `;
        }
        
    } catch (error) {
        console.error('Error generating practice questions:', error);
        document.getElementById('practiceQuestions').innerHTML = `
            <div class="alert alert-danger">
                Failed to generate practice questions. Please try again.
            </div>
        `;
    }
}

// Concept explanation functionality
function explainConcept() {
    const modal = new bootstrap.Modal(document.getElementById('conceptModal'));
    modal.show();
}

async function getConceptExplanation() {
    const concept = document.getElementById('conceptInput').value.trim();
    const subject = document.getElementById('conceptSubject').value;
    
    if (!concept) {
        alert('Please enter a concept to explain.');
        return;
    }
    
    try {
        const response = await fetch('/explain-concept', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                concept: concept,
                subject: subject,
                difficulty: 'Intermediate'
            })
        });
        
        const data = await response.json();
        
        const explanationDiv = document.getElementById('conceptExplanation');
        
        if (data.explanation) {
            explanationDiv.innerHTML = `
                <div class="alert alert-info">
                    <h6><i class="fas fa-lightbulb me-2"></i>Explanation of "${concept}":</h6>
                    <p>${data.explanation}</p>
                </div>
            `;
        } else {
            explanationDiv.innerHTML = `
                <div class="alert alert-danger">
                    Could not generate explanation. Please try again.
                </div>
            `;
        }
        
    } catch (error) {
        console.error('Error explaining concept:', error);
        document.getElementById('conceptExplanation').innerHTML = `
            <div class="alert alert-danger">
                Failed to generate explanation. Please try again.
            </div>
        `;
    }
}

// Analytics functionality
async function loadAnalytics() {
    try {
        const response = await fetch('/analytics');
        const data = await response.json();
        
        if (data.charts) {
            createCharts(data.charts);
        }
        
        if (data.statistics && data.statistics.overview) {
            updateStatistics(data.statistics);
        }
        
    } catch (error) {
        console.error('Error loading analytics:', error);
    }
}

function createCharts(chartData) {
    // Subject distribution chart
    const subjectCtx = document.getElementById('subjectChart');
    if (subjectCtx && chartData.subject_distribution) {
        if (charts.subjectChart) charts.subjectChart.destroy();
        
        charts.subjectChart = new Chart(subjectCtx.getContext('2d'), {
            type: 'doughnut',
            data: {
                labels: Object.keys(chartData.subject_distribution),
                datasets: [{
                    data: Object.values(chartData.subject_distribution),
                    backgroundColor: [
                        '#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0',
                        '#9966FF', '#FF9F40', '#FF6384', '#C9CBCF'
                    ]
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    title: {
                        display: true,
                        text: 'Questions by Subject'
                    }
                }
            }
        });
    }
    
    // Progress chart
    const progressCtx = document.getElementById('progressChart');
    if (progressCtx && chartData.mastery_levels) {
        if (charts.progressChart) charts.progressChart.destroy();
        
        charts.progressChart = new Chart(progressCtx.getContext('2d'), {
            type: 'line',
            data: {
                labels: Object.keys(chartData.mastery_levels),
                datasets: [{
                    label: 'Mastery Level (%)',
                    data: Object.values(chartData.mastery_levels),
                    borderColor: '#36A2EB',
                    backgroundColor: 'rgba(54, 162, 235, 0.1)',
                    tension: 0.4
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    title: {
                        display: true,
                        text: 'Mastery Levels'
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 100
                    }
                }
            }
        });
    }
}

function updateStatistics(stats) {
    // Update streak information
    if (stats.overview && stats.overview.study_days) {
        document.getElementById('streakDays').textContent = stats.overview.study_days;
        document.getElementById('currentStreak').textContent = stats.overview.study_days;
    }
}

// Session timer
function updateSessionTimer() {
    setInterval(() => {
        const elapsed = Date.now() - sessionStartTime;
        const minutes = Math.floor(elapsed / 60000);
        const seconds = Math.floor((elapsed % 60000) / 1000);
        
        const sessionTimeElement = document.getElementById('sessionTime');
        if (sessionTimeElement) {
            sessionTimeElement.textContent = 
                `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
        }
    }, 1000);
}

function updateSessionInfo(tokensUsed, responseTime) {
    // Update any session-specific UI elements
    if (tokensUsed) {
        console.log(`Tokens used: ${tokensUsed}`);
    }
    if (responseTime) {
        console.log(`Response time: ${responseTime}ms`);
    }
}

// Export functionality
async function exportProgress() {
    try {
        const response = await fetch('/export-progress', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                format: 'json'
            })
        });
        
        if (response.ok) {
            const blob = await response.blob();
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `learning_progress_${new Date().toISOString().split('T')[0]}.json`;
            document.body.appendChild(a);
            a.click();
            window.URL.revokeObjectURL(url);
            document.body.removeChild(a);
            
            addBotMessage('📊 Your learning progress has been exported successfully!');
        } else {
            addBotMessage('❌ Failed to export progress. Please try again.');
        }
        
    } catch (error) {
        console.error('Export error:', error);
        addBotMessage('❌ Export failed. Please try again.');
    }
}

// Additional helper functions
function startLearning(topic, subject, difficulty) {
    // Switch to chat tab and set the topic
    const chatTab = document.getElementById('chat-tab');
    chatTab.click();
    
    document.getElementById('subject').value = subject;
    document.getElementById('difficulty').value = difficulty;
    document.getElementById('messageInput').value = `I want to learn about ${topic}`;
    document.getElementById('messageInput').focus();
}

function checkAnswer(questionIndex, correctAnswer) {
    // This would implement answer checking logic
    const feedbackDiv = document.getElementById(`feedback_${questionIndex}`);
    feedbackDiv.innerHTML = '<div class="alert alert-info">Checking your answer...</div>';
    
    // Implementation would go here
    setTimeout(() => {
        feedbackDiv.innerHTML = '<div class="alert alert-success">Answer checking feature coming soon!</div>';
    }, 1000);
}

function showSolution(questionIndex, explanation) {
    const feedbackDiv = document.getElementById(`feedback_${questionIndex}`);
    feedbackDiv.innerHTML = `
        <div class="alert alert-warning">
            <strong>Solution:</strong> ${explanation}
        </div>
    `;
}

function generatePractice() {
    // Switch to practice tab
    const practiceTab = document.getElementById('practice-tab');
    practiceTab.click();
}

function analyzeResponse() {
    // This would implement response analysis
    addBotMessage('🔍 Response analysis feature coming soon! This will allow you to get detailed feedback on your answers.');
}

// Add smooth scrolling
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            target.scrollIntoView({
                behavior: 'smooth'
            });
        }
    });
});

// Initialize tooltips
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl);
});

// Event listeners
document.getElementById('messageInput').addEventListener('keypress', function(event) {
    if (event.key === 'Enter') {
        event.preventDefault();
        sendMessage();
    }
});

document.addEventListener('keydown', function(event) {
    // Ctrl/Cmd + K to focus search
    if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
        event.preventDefault();
        document.getElementById('messageInput').focus();
    }
    
    // Escape to close modals
    if (event.key === 'Escape') {
        const modals = document.querySelectorAll('.modal.show');
        modals.forEach(modal => {
            bootstrap.Modal.getInstance(modal).hide();
        });
    }
});

// Add smooth scrolling
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            target.scrollIntoView({
                behavior: 'smooth'
            });
        }
    });
});

// Initialize tooltips
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl);
});

// Console branding
console.log('%c Advanced Educational Tutor Bot ', 'background: #0066cc; color: white; font-size: 16px; font-weight: bold;');
console.log('%c © 2026 RSK World - All rights reserved ', 'background: #28a745; color: white; font-size: 12px;');
console.log('%c Founded by Molla Samser | Designer & Tester: Rima Khatun ', 'background: #ffc107; color: black; font-size: 11px;');
console.log('%c Contact: info@rskworld.com | +91 93305 39277 ', 'background: #dc3545; color: white; font-size: 11px;');
