<!DOCTYPE html>
<html lang="en">
<head>
    <!--
    Advanced Educational Tutor Bot - AI-powered educational platform
    Author: RSK World (https://rskworld.in)
    Founded by: Molla Samser
    Designer & Tester: Rima Khatun
    Contact: info@rskworld.com, +91 93305 39277
    Year: 2026
    -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Advanced AI-powered educational tutor with multi-language support, voice input, and progress tracking">
    <meta name="keywords" content="education, AI tutor, learning, progress tracking, multi-language">
    <title>Advanced Educational Tutor Bot - RSK World</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- Custom CSS -->
    <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
</head>
<body>
    <!-- Enhanced Header -->
    <header class="bg-gradient text-white py-3">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <h1 class="mb-0">
                        <i class="fas fa-graduation-cap me-2"></i>
                        Advanced Educational Tutor Bot
                    </h1>
                    <p class="mb-0">AI-powered learning platform by RSK World</p>
                </div>
                <div class="col-md-6 text-md-end">
                    <small>
                        © 2026 RSK World | Founded by Molla Samser<br>
                        Designer & Tester: Rima Khatun | Contact: info@rskworld.com
                    </small>
                </div>
            </div>
        </div>
    </header>

    <!-- Navigation Tabs -->
    <nav class="bg-light border-bottom">
        <div class="container">
            <ul class="nav nav-tabs" id="mainTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="chat-tab" data-bs-toggle="tab" data-bs-target="#chat" type="button" role="tab">
                        <i class="fas fa-comments me-2"></i>Chat
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="learning-tab" data-bs-toggle="tab" data-bs-target="#learning" type="button" role="tab">
                        <i class="fas fa-book me-2"></i>Learning Paths
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="practice-tab" data-bs-toggle="tab" data-bs-target="#practice" type="button" role="tab">
                        <i class="fas fa-tasks me-2"></i>Practice
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="analytics-tab" data-bs-toggle="tab" data-bs-target="#analytics" type="button" role="tab">
                        <i class="fas fa-chart-line me-2"></i>Analytics
                    </button>
                </li>
            </ul>
        </div>
    </nav>

    <main class="container my-4">
        <div class="tab-content" id="mainTabContent">
            <!-- Chat Tab -->
            <div class="tab-pane fade show active" id="chat" role="tabpanel">
                <div class="row">
                    <!-- Enhanced Settings Panel -->
                    <div class="col-lg-3 mb-4">
                        <div class="card">
                            <div class="card-header">
                                <h5><i class="fas fa-cog me-2"></i>Learning Settings</h5>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <label for="subject" class="form-label">Subject</label>
                                    <select class="form-select" id="subject">
                                        <option value="">General</option>
                                        {% for subject in subjects %}
                                        <option value="{{ subject }}">{{ subject }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label for="difficulty" class="form-label">Difficulty Level</label>
                                    <select class="form-select" id="difficulty">
                                        {% for level in difficulty_levels %}
                                        <option value="{{ level }}" {% if level == 'Intermediate' %}selected{% endif %}>{{ level }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label for="language" class="form-label">Language</label>
                                    <select class="form-select" id="language">
                                        <option value="en">English</option>
                                        <option value="es">Spanish</option>
                                        <option value="fr">French</option>
                                        <option value="de">German</option>
                                        <option value="hi">Hindi</option>
                                        <option value="bn">Bengali</option>
                                        <option value="zh">Chinese</option>
                                        <option value="ja">Japanese</option>
                                        <option value="ko">Korean</option>
                                        <option value="ar">Arabic</option>
                                    </select>
                                </div>
                                
                                <!-- Voice Input -->
                                <div class="mb-3">
                                    <label class="form-label">Voice Input</label>
                                    <div class="d-grid gap-2">
                                        <button class="btn btn-outline-primary" id="voiceBtn" onclick="toggleVoiceInput()">
                                            <i class="fas fa-microphone me-2"></i>
                                            <span id="voiceBtnText">Start Recording</span>
                                        </button>
                                    </div>
                                </div>
                                
                                <!-- File Upload -->
                                <div class="mb-3">
                                    <label for="fileUpload" class="form-label">Upload Document</label>
                                    <input type="file" class="form-control" id="fileUpload" accept=".txt,.pdf,.doc,.docx,.png,.jpg,.jpeg">
                                    <button class="btn btn-sm btn-outline-secondary mt-2" onclick="uploadFile()">
                                        <i class="fas fa-upload me-1"></i>Upload
                                    </button>
                                </div>
                                
                                <div class="d-grid gap-2">
                                    <button class="btn btn-info" onclick="showProgress()">
                                        <i class="fas fa-chart-line me-2"></i>View Progress
                                    </button>
                                    <button class="btn btn-secondary" onclick="showHistory()">
                                        <i class="fas fa-history me-2"></i>Chat History
                                    </button>
                                    <button class="btn btn-success" onclick="exportProgress()">
                                        <i class="fas fa-download me-2"></i>Export Data
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Advanced Features Card -->
                        <div class="card mt-3">
                            <div class="card-header">
                                <h6><i class="fas fa-star me-2"></i>Advanced Features</h6>
                            </div>
                            <div class="card-body">
                                <ul class="list-unstyled small">
                                    <li><i class="fas fa-check text-success me-2"></i>AI-powered tutoring</li>
                                    <li><i class="fas fa-check text-success me-2"></i>Multi-language support</li>
                                    <li><i class="fas fa-check text-success me-2"></i>Voice input</li>
                                    <li><i class="fas fa-check text-success me-2"></i>File analysis</li>
                                    <li><i class="fas fa-check text-success me-2"></i>Learning paths</li>
                                    <li><i class="fas fa-check text-success me-2"></i>Practice questions</li>
                                    <li><i class="fas fa-check text-success me-2"></i>Progress analytics</li>
                                    <li><i class="fas fa-check text-success me-2"></i>Achievement system</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!-- Enhanced Chat Area -->
                    <div class="col-lg-9">
                        <div class="card">
                            <div class="card-header bg-info text-white d-flex justify-content-between align-items-center">
                                <h5 class="mb-0"><i class="fas fa-comments me-2"></i>Learning Session</h5>
                                <div>
                                    <small class="me-3"><i class="fas fa-clock me-1"></i><span id="sessionTime">00:00</span></small>
                                    <small><i class="fas fa-fire me-1"></i><span id="streakDays">0</span> day streak</small>
                                </div>
                            </div>
                            <div class="card-body">
                                <div id="chatMessages" class="chat-messages mb-3" style="height: 400px; overflow-y: auto; border: 1px solid #ddd; padding: 15px; background-color: #f8f9fa;">
                                    <div class="text-center text-muted">
                                        <i class="fas fa-robot fa-3x mb-3"></i>
                                        <h4>Welcome to Advanced Educational Tutor Bot!</h4>
                                        <p>I'm here to help you learn with AI-powered tutoring, multi-language support, and advanced features.</p>
                                        <p>Choose your settings and start asking questions, or explore the learning paths and practice sections!</p>
                                        <small class="text-muted">© 2026 RSK World - Advanced Educational Platform</small>
                                    </div>
                                </div>
                                
                                <!-- Enhanced Input Area -->
                                <div class="input-group mb-3">
                                    <input type="text" id="messageInput" class="form-control" placeholder="Ask your question here..." onkeypress="if(event.key === 'Enter') sendMessage()">
                                    <button class="btn btn-primary" onclick="sendMessage()">
                                        <i class="fas fa-paper-plane me-2"></i>Send
                                    </button>
                                </div>
                                
                                <!-- Quick Actions -->
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="btn-group" role="group">
                                        <button class="btn btn-sm btn-outline-secondary" onclick="explainConcept()">
                                            <i class="fas fa-lightbulb me-1"></i>Explain Concept
                                        </button>
                                        <button class="btn btn-sm btn-outline-secondary" onclick="generatePractice()">
                                            <i class="fas fa-tasks me-1"></i>Practice Questions
                                        </button>
                                        <button class="btn btn-sm btn-outline-secondary" onclick="analyzeResponse()">
                                            <i class="fas fa-search me-1"></i>Analyze Answer
                                        </button>
                                    </div>
                                    <small class="text-muted">
                                        <i class="fas fa-info-circle me-1"></i>
                                        Powered by OpenAI API | Developed by RSK World (2026)
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Learning Paths Tab -->
            <div class="tab-pane fade" id="learning" role="tabpanel">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h5><i class="fas fa-book me-2"></i>Structured Learning Paths</h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-4 mb-3">
                                        <label for="pathSubject" class="form-label">Select Subject</label>
                                        <select class="form-select" id="pathSubject" onchange="loadLearningPath()">
                                            <option value="">Choose a subject...</option>
                                            {% for subject in subjects %}
                                            <option value="{{ subject }}">{{ subject }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label for="pathDifficulty" class="form-label">Difficulty Level</label>
                                        <select class="form-select" id="pathDifficulty" onchange="loadLearningPath()">
                                            <option value="Beginner">Beginner</option>
                                            <option value="Intermediate" selected>Intermediate</option>
                                            <option value="Advanced">Advanced</option>
                                        </select>
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label class="form-label">&nbsp;</label>
                                        <div class="d-grid">
                                            <button class="btn btn-primary" onclick="loadLearningPath()">
                                                <i class="fas fa-sync me-2"></i>Load Path
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                
                                <div id="learningPathContent" class="mt-4">
                                    <div class="text-center text-muted">
                                        <i class="fas fa-route fa-3x mb-3"></i>
                                        <p>Select a subject and difficulty to view your personalized learning path.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Practice Tab -->
            <div class="tab-pane fade" id="practice" role="tabpanel">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h5><i class="fas fa-tasks me-2"></i>Practice Questions</h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-3 mb-3">
                                        <label for="practiceSubject" class="form-label">Subject</label>
                                        <select class="form-select" id="practiceSubject">
                                            {% for subject in subjects %}
                                            <option value="{{ subject }}">{{ subject }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                    <div class="col-md-3 mb-3">
                                        <label for="practiceTopic" class="form-label">Topic</label>
                                        <input type="text" class="form-control" id="practiceTopic" placeholder="e.g., Algebra, Chemistry">
                                    </div>
                                    <div class="col-md-3 mb-3">
                                        <label for="practiceDifficulty" class="form-label">Difficulty</label>
                                        <select class="form-select" id="practiceDifficulty">
                                            <option value="Beginner">Beginner</option>
                                            <option value="Intermediate" selected>Intermediate</option>
                                            <option value="Advanced">Advanced</option>
                                        </select>
                                    </div>
                                    <div class="col-md-3 mb-3">
                                        <label for="questionCount" class="form-label">Number of Questions</label>
                                        <select class="form-select" id="questionCount">
                                            <option value="3">3</option>
                                            <option value="5" selected>5</option>
                                            <option value="10">10</option>
                                            <option value="15">15</option>
                                        </select>
                                    </div>
                                </div>
                                
                                <div class="text-center mb-4">
                                    <button class="btn btn-primary btn-lg" onclick="generatePracticeQuestions()">
                                        <i class="fas fa-magic me-2"></i>Generate Practice Questions
                                    </button>
                                </div>
                                
                                <div id="practiceQuestions">
                                    <div class="text-center text-muted">
                                        <i class="fas fa-question-circle fa-3x mb-3"></i>
                                        <p>Configure your practice settings and click generate to create custom questions.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Analytics Tab -->
            <div class="tab-pane fade" id="analytics" role="tabpanel">
                <div class="row">
                    <div class="col-md-8">
                        <div class="card">
                            <div class="card-header">
                                <h5><i class="fas fa-chart-line me-2"></i>Learning Analytics</h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6 mb-4">
                                        <canvas id="subjectChart"></canvas>
                                    </div>
                                    <div class="col-md-6 mb-4">
                                        <canvas id="progressChart"></canvas>
                                    </div>
                                    <div class="col-md-6 mb-4">
                                        <canvas id="timeChart"></canvas>
                                    </div>
                                    <div class="col-md-6 mb-4">
                                        <canvas id="masteryChart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-header">
                                <h6><i class="fas fa-trophy me-2"></i>Achievements</h6>
                            </div>
                            <div class="card-body">
                                <div id="achievementsList">
                                    <div class="text-center text-muted">
                                        <i class="fas fa-medal fa-2x mb-3"></i>
                                        <p>Keep learning to unlock achievements!</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="card mt-3">
                            <div class="card-header">
                                <h6><i class="fas fa-fire me-2"></i>Learning Streaks</h6>
                            </div>
                            <div class="card-body">
                                <div class="text-center">
                                    <h2 class="text-primary" id="currentStreak">0</h2>
                                    <p class="mb-0">Current Day Streak</p>
                                    <small class="text-muted">Keep it up!</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- Progress Modal -->
    <div class="modal fade" id="progressModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fas fa-chart-line me-2"></i>Learning Progress</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div id="progressContent">
                        <div class="text-center">
                            <div class="spinner-border" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- History Modal -->
    <div class="modal fade" id="historyModal" tabindex="-1">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fas fa-history me-2"></i>Chat History</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div id="historyContent">
                        <div class="text-center">
                            <div class="spinner-border" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Concept Explanation Modal -->
    <div class="modal fade" id="conceptModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fas fa-lightbulb me-2"></i>Concept Explanation</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="conceptInput" class="form-label">Enter a concept to explain:</label>
                        <input type="text" class="form-control" id="conceptInput" placeholder="e.g., Photosynthesis, Pythagorean Theorem">
                    </div>
                    <div class="mb-3">
                        <label for="conceptSubject" class="form-label">Subject (optional):</label>
                        <select class="form-select" id="conceptSubject">
                            <option value="">General</option>
                            {% for subject in subjects %}
                            <option value="{{ subject }}">{{ subject }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="text-center">
                        <button class="btn btn-primary" onclick="getConceptExplanation()">
                            <i class="fas fa-search me-2"></i>Explain Concept
                        </button>
                    </div>
                    <div id="conceptExplanation" class="mt-4"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer class="bg-dark text-white py-4 mt-5">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h6>RSK World - Advanced Educational Platform</h6>
                    <p class="small mb-0">Free programming resources and advanced educational tools</p>
                    <p class="small mb-0">Founded by Molla Samser | Designer & Tester: Rima Khatun</p>
                </div>
                <div class="col-md-6 text-md-end">
                    <p class="small mb-0">
                        <i class="fas fa-envelope me-2"></i>info@rskworld.com<br>
                        <i class="fas fa-phone me-2"></i>+91 93305 39277<br>
                        <i class="fas fa-globe me-2"></i>https://rskworld.in
                    </p>
                </div>
            </div>
            <hr class="my-3">
            <div class="text-center">
                <small>© 2026 RSK World. All rights reserved. | Advanced Educational Tutor Bot v2.0</small>
            </div>
        </div>
    </footer>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- Custom JavaScript -->
    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
</body>
</html>
