{% extends "base.html" %}

{% block content %}
<div class="space-y-8">
    <!-- Header -->
    <div class="bg-gradient-to-r from-primary to-secondary p-5 md:p-8 rounded-xl shadow-lg text-white">
        <div class="flex flex-col sm:flex-row justify-between items-center gap-4">
            <div class="text-center sm:text-left">
                <h1 class="text-3xl md:text-4xl font-bold">Manage Students</h1>
                <p class="mt-2 opacity-90">Oversee and manage your class roster</p>
            </div>
            <a href="{{ url_for('teacher.add_student') }}" 
               class="btn btn-secondary hover:btn-secondary-focus gap-2 w-full sm:w-auto">
                <i class="fas fa-plus"></i>
                <span class="whitespace-nowrap">Add New Student</span>
            </a>
        </div>
    </div>

    <!-- Search and Filter -->
    <div class="bg-white p-4 md:p-6 rounded-xl shadow-lg">
        <div class="flex flex-col sm:flex-row gap-4 items-center">
            <div class="form-control w-full sm:w-96">
                <div class="input-group">
                    <span class="btn btn-square bg-base-200 border-base-200">
                        <i class="fas fa-search"></i>
                    </span>
                    <input type="text" 
                           id="studentSearch"
                           placeholder="Search by name or email..." 
                           class="input input-bordered w-full"
                           onkeyup="filterStudents(this.value)">
                </div>
            </div>
            <div class="stats shadow">
                <div class="stat px-4 py-2 md:p-4">
                    <div class="stat-title text-xs md:text-sm">Total Students</div>
                    <div class="stat-value text-primary text-2xl md:text-3xl">{{ students|length }}</div>
                </div>
            </div>
        </div>
        
        <!-- Mobile View - Empty State -->
        <div id="noResultsMessage" class="hidden md:hidden mt-4 text-center py-6 bg-base-200 rounded-lg">
            <i class="fas fa-search text-3xl text-gray-400 mb-2"></i>
            <p class="text-gray-500">No students found matching your search.</p>
        </div>
    </div>

    <!-- Student List - Desktop View (Hidden on small screens) -->
    <div class="hidden md:block bg-white p-6 rounded-xl shadow-lg overflow-x-auto">
        <table class="table table-zebra w-full">
            <thead>
                <tr>
                    <th class="bg-base-200">Student</th>
                    <th class="bg-base-200">Contact</th>
                    <th class="bg-base-200">Progress</th>
                    <th class="bg-base-200">Actions</th>
                </tr>
            </thead>
            <tbody id="studentTableBody">
                {% for student in students %}
                <tr class="student-row hover" 
                    data-student-name="{{ student.username.lower() }}" 
                    data-student-email="{{ student.email.lower() }}">
                    <td>
                        <div class="flex items-center space-x-3">
                            <div class="avatar placeholder">
                                <div class="bg-neutral-focus text-neutral-content rounded-full w-12">
                                    <span>{{ student.username[:2].upper() }}</span>
                                </div>
                            </div>
                            <div>
                                <div class="font-bold">{{ student.username }}</div>
                                <div class="text-sm opacity-50">ID: {{ student.id }}</div>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="flex flex-col">
                            <span class="badge badge-ghost">{{ student.email }}</span>
                            {% if student.phone_number %}
                            <span class="text-sm opacity-50">{{ student.phone_number }}</span>
                            {% endif %}
                        </div>
                    </td>
                    <td>
                        <div class="flex flex-col gap-2">
                            <!-- Reading Progress -->
                            <div class="flex items-center gap-2">
                                <div class="flex items-center gap-2 w-20 text-blue-500">
                                    <i class="fas fa-book-open"></i>
                                    <span class="text-xs font-medium">Reading</span>
                                </div>
                                <div class="w-full bg-base-200 rounded-full h-2.5">
                                    <div class="bg-blue-500 h-2.5 rounded-full transition-all duration-500" 
                                         style="width: {{ student.reading_progress }}%"></div>
                                </div>
                                <span class="text-sm font-medium w-14 text-right">{{ student.reading_progress|default(0) }}%</span>
                            </div>
                            
                            <!-- Comprehension Progress -->
                            <div class="flex items-center gap-2">
                                <div class="flex items-center gap-2 w-20 text-purple-500">
                                    <i class="fas fa-brain"></i>
                                    <span class="text-xs font-medium">Quiz</span>
                                </div>
                                <div class="w-full bg-base-200 rounded-full h-2.5">
                                    <div class="bg-purple-500 h-2.5 rounded-full transition-all duration-500" 
                                         style="width: {{ student.writing_progress }}%"></div>
                                </div>
                                <span class="text-sm font-medium w-14 text-right">{{ student.writing_progress|default(0) }}%</span>
                            </div>
                            
                            <!-- Speaking Progress -->
                            <div class="flex items-center gap-2">
                                <div class="flex items-center gap-2 w-20 text-green-500">
                                    <i class="fas fa-microphone"></i>
                                    <span class="text-xs font-medium">Speaking</span>
                                </div>
                                <div class="w-full bg-base-200 rounded-full h-2.5">
                                    <div class="bg-green-500 h-2.5 rounded-full transition-all duration-500" 
                                         style="width: {{ student.speaking_progress }}%"></div>
                                </div>
                                <span class="text-sm font-medium w-14 text-right">{{ student.speaking_progress|default(0) }}%</span>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="flex flex-col sm:flex-row gap-2">
                            <a href="{{ url_for('teacher.student_details', student_id=student.id) }}" 
                               class="btn btn-sm btn-info gap-1">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                                    <path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z" />
                                </svg>
                                Progress
                            </a>
                            <button onclick="removeStudent('{{ student.id }}', '{{ student.username }}')" 
                                    class="btn btn-sm btn-error gap-1">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
                                </svg>
                                Remove
                            </button>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <!-- Student List - Mobile View (Card-based layout) -->
    <div class="md:hidden">
        <div id="mobileStudentList" class="space-y-4">
            {% for student in students %}
            <div class="card bg-base-100 shadow-lg student-row" 
                 data-student-name="{{ student.username.lower() }}" 
                 data-student-email="{{ student.email.lower() }}">
                <div class="card-body p-4">
                    <!-- Student Header with Avatar -->
                    <div class="flex items-center gap-3">
                        <div class="avatar placeholder">
                            <div class="bg-neutral-focus text-neutral-content rounded-full w-12">
                                <span>{{ student.username[:2].upper() }}</span>
                            </div>
                        </div>
                        <div class="flex-1">
                            <h3 class="font-bold text-lg">{{ student.username }}</h3>
                            <p class="text-xs opacity-70">ID: {{ student.id }}</p>
                        </div>
                        <!-- Expand/Collapse Button -->
                        <button class="btn btn-sm btn-ghost btn-circle student-expand-btn">
                            <i class="fas fa-chevron-down"></i>
                        </button>
                    </div>
                    
                    <!-- Collapsible Content -->
                    <div class="student-details mt-3 hidden">
                        <div class="divider my-2"></div>
                        
                        <!-- Contact Information -->
                        <div class="mb-3">
                            <h4 class="text-sm font-medium mb-2">Contact Information</h4>
                            <div class="badge badge-outline">{{ student.email }}</div>
                            {% if student.phone_number %}
                            <div class="mt-1 text-sm">{{ student.phone_number }}</div>
                            {% endif %}
                        </div>
                        
                        <!-- Progress Section -->
                        <div class="mb-3">
                            <h4 class="text-sm font-medium mb-2">Learning Progress</h4>
                            
                            <!-- Reading Progress -->
                            <div class="mb-2">
                                <div class="flex items-center justify-between mb-1">
                                    <div class="flex items-center gap-1 text-blue-500">
                                        <i class="fas fa-book-open"></i>
                                        <span class="text-xs font-medium">Reading</span>
                                    </div>
                                    <span class="text-xs font-medium">{{ student.reading_progress|default(0) }}%</span>
                                </div>
                                <div class="w-full bg-base-200 rounded-full h-2">
                                    <div class="bg-blue-500 h-2 rounded-full transition-all duration-500" 
                                         style="width: {{ student.reading_progress }}%"></div>
                                </div>
                            </div>
                            
                            <!-- Comprehension Progress -->
                            <div class="mb-2">
                                <div class="flex items-center justify-between mb-1">
                                    <div class="flex items-center gap-1 text-purple-500">
                                        <i class="fas fa-brain"></i>
                                        <span class="text-xs font-medium">Quiz</span>
                                    </div>
                                    <span class="text-xs font-medium">{{ student.writing_progress|default(0) }}%</span>
                                </div>
                                <div class="w-full bg-base-200 rounded-full h-2">
                                    <div class="bg-purple-500 h-2 rounded-full transition-all duration-500" 
                                         style="width: {{ student.writing_progress }}%"></div>
                                </div>
                            </div>
                            
                            <!-- Speaking Progress -->
                            <div>
                                <div class="flex items-center justify-between mb-1">
                                    <div class="flex items-center gap-1 text-green-500">
                                        <i class="fas fa-microphone"></i>
                                        <span class="text-xs font-medium">Speaking</span>
                                    </div>
                                    <span class="text-xs font-medium">{{ student.speaking_progress|default(0) }}%</span>
                                </div>
                                <div class="w-full bg-base-200 rounded-full h-2">
                                    <div class="bg-green-500 h-2 rounded-full transition-all duration-500" 
                                         style="width: {{ student.speaking_progress }}%"></div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Action Buttons -->
                        <div class="card-actions justify-end mt-3">
                            <a href="{{ url_for('teacher.student_details', student_id=student.id) }}" 
                               class="btn btn-sm btn-info gap-1">
                                <i class="fas fa-chart-line"></i>
                                Progress
                            </a>
                            <button onclick="removeStudent('{{ student.id }}', '{{ student.username }}')" 
                                    class="btn btn-sm btn-error gap-1">
                                <i class="fas fa-trash"></i>
                                Remove
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>

<!-- Remove Student Confirmation Modal -->
<div id="removeStudentModal" class="modal">
    <div class="modal-box">
        <h3 class="font-bold text-lg text-error">Remove Student</h3>
        <p class="py-4">Are you sure you want to remove <span id="studentNameToRemove" class="font-semibold"></span> from your class?</p>
        <p class="text-sm text-base-content/70">This action cannot be undone.</p>
        <div class="modal-action">
            <button id="confirmRemoveBtn" class="btn btn-error gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
                </svg>
                Remove Student
            </button>
            <button onclick="closeRemoveModal()" class="btn btn-ghost">Cancel</button>
        </div>
    </div>
</div>

{% block extra_js %}
<script>
function filterStudents(query) {
    query = query.toLowerCase();
    const rows = document.getElementsByClassName('student-row');
    const noResultsMessage = document.getElementById('noResultsMessage');
    let visibleCount = 0;
    
    for (let row of rows) {
        const name = row.dataset.studentName;
        const email = row.dataset.studentEmail;
        
        if (name.includes(query) || email.includes(query)) {
            row.style.display = '';
            visibleCount++;
        } else {
            row.style.display = 'none';
        }
    }
    
    // Show/hide the no results message for mobile view
    if (visibleCount === 0) {
        noResultsMessage.classList.remove('hidden');
    } else {
        noResultsMessage.classList.add('hidden');
    }
}

// Mobile expand/collapse functionality
document.addEventListener('DOMContentLoaded', function() {
    const expandButtons = document.querySelectorAll('.student-expand-btn');
    
    expandButtons.forEach(button => {
        button.addEventListener('click', function() {
            // Find the parent card and details section
            const card = this.closest('.card');
            const details = card.querySelector('.student-details');
            const icon = this.querySelector('i');
            
            // Toggle the details visibility
            details.classList.toggle('hidden');
            
            // Toggle the icon
            if (details.classList.contains('hidden')) {
                icon.classList.remove('fa-chevron-up');
                icon.classList.add('fa-chevron-down');
            } else {
                icon.classList.remove('fa-chevron-down');
                icon.classList.add('fa-chevron-up');
            }
        });
    });
});

let studentIdToRemove = null;

function removeStudent(studentId, studentName) {
    studentIdToRemove = studentId;
    document.getElementById('studentNameToRemove').textContent = studentName;
    document.getElementById('removeStudentModal').classList.add('modal-open');
}

function closeRemoveModal() {
    document.getElementById('removeStudentModal').classList.remove('modal-open');
    studentIdToRemove = null;
}

document.getElementById('confirmRemoveBtn').addEventListener('click', async function() {
    if (!studentIdToRemove) return;
    
    try {
        // Get the CSRF token from the meta tag
        const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        
        const response = await fetch(`/teacher/students/${studentIdToRemove}/remove`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': csrfToken  // Add CSRF token to headers
            },
        });
        
        if (response.ok) {
            window.location.reload();
        } else {
            const error = await response.json();
            throw new Error(error.message || 'Failed to remove student');
        }
    } catch (error) {
        console.error('Error:', error);
        // Show error toast
        const toast = document.createElement('div');
        toast.className = 'toast toast-end';
        toast.innerHTML = `
            <div class="alert alert-error">
                <div>
                    <span>${error.message || 'An error occurred while removing the student.'}</span>
                </div>
            </div>
        `;
        document.body.appendChild(toast);
        setTimeout(() => toast.remove(), 3000);
    } finally {
        closeRemoveModal();
    }
});

// Initialize search functionality
document.getElementById('studentSearch').addEventListener('input', function(e) {
    filterStudents(e.target.value);
});
</script>
{% endblock %}
{% endblock %}