{% extends 'base.html' %}

{% block title %}My Vocabulary Quizzes{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="row">
        <div class="col-lg-10 mx-auto">
            <h2 class="mb-4">My Vocabulary Quizzes</h2>
            
            <!-- Pending Quizzes -->
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-warning">
                    <h4 class="card-title mb-0">Pending Quizzes</h4>
                </div>
                <div class="card-body">
                    {% if pending_quizzes %}
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Topic</th>
                                    <th>Created</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for quiz in pending_quizzes %}
                                <tr>
                                    <td>{{ topics.get(quiz.topic_id, 'Unknown Topic') }}</td>
                                    <td>{{ quiz.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
                                    <td>
                                        <a href="{{ url_for('student.vocabulary_quiz_take', quiz_id=quiz.id) }}" 
                                           class="btn btn-sm btn-primary">Take Quiz</a>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <div class="text-center py-3">
                        <i class="fas fa-check-circle fa-3x text-success mb-3"></i>
                        <p>You don't have any pending vocabulary quizzes.</p>
                    </div>
                    {% endif %}
                </div>
            </div>
            
            <!-- All Available Topics -->
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-primary text-white">
                    <h4 class="card-title mb-0">Available Vocabulary Quizzes</h4>
                </div>
                <div class="card-body">
                    {% if categories %}
                        <div class="accordion" id="categoryAccordion">
                            {% for category_name, topics in categories.items() %}
                                <div class="accordion-item mb-3">
                                    <h2 class="accordion-header" id="heading{{ category_name|replace(' ', '') }}">
                                        <button class="accordion-button" type="button" data-bs-toggle="collapse" 
                                                data-bs-target="#collapse{{ category_name|replace(' ', '') }}" 
                                                aria-expanded="true" aria-controls="collapse{{ category_name|replace(' ', '') }}">
                                            {{ category_name }} ({{ topics|length }} topics)
                                        </button>
                                    </h2>
                                    <div id="collapse{{ category_name|replace(' ', '') }}" class="accordion-collapse collapse show" 
                                         aria-labelledby="heading{{ category_name|replace(' ', '') }}">
                                        <div class="accordion-body p-0">
                                            <div class="table-responsive">
                                                <table class="table table-hover mb-0">
                                                    <thead>
                                                        <tr>
                                                            <th>#</th>
                                                            <th>Topic</th>
                                                            <th>Status</th>
                                                            <th>Actions</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        {% for topic in topics %}
                                                        <tr>
                                                            <td>{{ loop.index }}</td>
                                                            <td>{{ topic.title }}</td>
                                                            <td>
                                                                {% if topic.is_locked %}
                                                                    <span class="badge bg-secondary">Not Started</span>
                                                                {% elif topic.pending_quiz %}
                                                                    <span class="badge bg-warning text-dark">Quiz Ready</span>
                                                                {% elif topic.completed_quiz %}
                                                                    <span class="badge bg-success">Completed</span>
                                                                {% else %}
                                                                    <span class="badge bg-info">Available</span>
                                                                {% endif %}
                                                            </td>
                                                            <td>
                                                                {% if topic.is_locked %}
                                                                    <button class="btn btn-sm btn-outline-secondary" disabled>
                                                                        <i class="fas fa-lock"></i> Start Topic First
                                                                    </button>
                                                                {% elif topic.pending_quiz %}
                                                                    <a href="{{ url_for('student.vocabulary_quiz_take', quiz_id=topic.pending_quiz.id) }}" 
                                                                       class="btn btn-sm btn-warning">
                                                                        Take Quiz
                                                                    </a>
                                                                {% elif topic.completed_quiz %}
                                                                    <div class="btn-group" role="group">
                                                                        <a href="{{ url_for('student.vocabulary_quiz_results', quiz_id=topic.completed_quiz.id) }}" 
                                                                           class="btn btn-sm btn-outline-success">
                                                                            View Results
                                                                        </a>
                                                                        <form method="POST" action="{{ url_for('student.generate_vocabulary_quiz', topic_id=topic.id) }}" class="d-inline">
                                                                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                                                            <button type="submit" class="btn btn-sm btn-outline-primary">
                                                                                Retake Quiz
                                                                            </button>
                                                                        </form>
                                                                    </div>
                                                                {% else %}
                                                                    <form method="POST" action="{{ url_for('student.generate_vocabulary_quiz', topic_id=topic.id) }}" class="d-inline">
                                                                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                                                        <button type="submit" class="btn btn-sm btn-primary">
                                                                            Generate Quiz
                                                                        </button>
                                                                    </form>
                                                                {% endif %}
                                                            </td>
                                                        </tr>
                                                        {% endfor %}
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="text-center py-3">
                            <i class="fas fa-book fa-3x text-muted mb-3"></i>
                            <p>No topics available for vocabulary quizzes.</p>
                        </div>
                    {% endif %}
                </div>
            </div>
            
            <!-- Completed Quizzes -->
            <div class="card shadow-sm">
                <div class="card-header bg-success text-white">
                    <h4 class="card-title mb-0">Completed Quizzes</h4>
                </div>
                <div class="card-body">
                    {% if completed_quizzes %}
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Topic</th>
                                    <th>Completed</th>
                                    <th>Score</th>
                                    <th>Words Learned</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for quiz in completed_quizzes %}
                                <tr>
                                    <td>{{ topics.get(quiz.topic_id, 'Unknown Topic') }}</td>
                                    <td>{{ quiz.completed_at.strftime('%Y-%m-%d %H:%M') }}</td>
                                    <td>
                                        <span class="badge 
                                            {% if quiz.score >= 80 %}bg-success
                                            {% elif quiz.score >= 60 %}bg-info
                                            {% elif quiz.score >= 40 %}bg-warning text-dark
                                            {% else %}bg-danger{% endif %}">
                                            {{ quiz.score }}%
                                        </span>
                                    </td>
                                    <td>{{ quiz.words_learned }}/{{ quiz.questions|length }}</td>
                                    <td>
                                        <a href="{{ url_for('student.vocabulary_quiz_results', quiz_id=quiz.id) }}" 
                                           class="btn btn-sm btn-outline-primary">View Results</a>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <div class="text-center py-3">
                        <i class="fas fa-info-circle fa-3x text-info mb-3"></i>
                        <p>You haven't completed any vocabulary quizzes yet.</p>
                    </div>
                    {% endif %}
                </div>
            </div>
            
            <div class="text-center mt-4">
                <a href="{{ url_for('student.dashboard') }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> Back to Dashboard
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Bootstrap JavaScript -->
<script>
    // Make sure all accordions are initialized properly
    document.addEventListener('DOMContentLoaded', function() {
        var accordionButtons = document.querySelectorAll('.accordion-button');
        
        accordionButtons.forEach(function(button) {
            button.addEventListener('click', function() {
                var isExpanded = this.getAttribute('aria-expanded') === 'true';
                this.setAttribute('aria-expanded', !isExpanded);
                
                var target = document.querySelector(this.getAttribute('data-bs-target'));
                if (target) {
                    if (isExpanded) {
                        target.classList.remove('show');
                    } else {
                        target.classList.add('show');
                    }
                }
            });
        });
    });
</script>
{% endblock %}