{% extends "admin/base.html" %}

{% block content %}
<div class="container mx-auto px-4 py-6">
    <!-- Page Header -->
    <div class="bg-white rounded-xl shadow-md p-6 mb-8">
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center">
            <div>
                <h1 class="text-2xl md:text-3xl font-bold text-gray-900 mb-2">Manage Students</h1>
                <p class="text-gray-600">Add, edit or remove student accounts in the system</p>
            </div>
            <div class="mt-4 md:mt-0">
                <a href="{{ url_for('admin.dashboard') }}" class="btn btn-outline btn-sm gap-2">
                    <i class="fas fa-arrow-left"></i> Back to Dashboard
                </a>
            </div>
        </div>
    </div>
    
    <!-- Dashboard Overview Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <div class="bg-white p-6 rounded-xl shadow-md">
            <div class="flex items-center">
                <div class="w-14 h-14 rounded-full bg-indigo-100 flex items-center justify-center mr-4">
                    <i class="fas fa-user-graduate text-indigo-600 text-2xl"></i>
                </div>
                <div>
                    <div class="text-gray-500 text-sm font-medium">Total Students</div>
                    <div class="text-2xl font-bold text-gray-800">{{ students|length }}</div>
                </div>
            </div>
        </div>
        
        <div class="bg-white p-6 rounded-xl shadow-md">
            <div class="flex items-center">
                <div class="w-14 h-14 rounded-full bg-green-100 flex items-center justify-center mr-4">
                    <i class="fas fa-check-circle text-green-600 text-2xl"></i>
                </div>
                <div>
                    <div class="text-gray-500 text-sm font-medium">Active Students</div>
                    <div class="text-2xl font-bold text-gray-800">
                        {% set active_count = 0 %}
                        {% for student in students %}
                            {% if student.is_approved %}
                                {% set active_count = active_count + 1 %}
                            {% endif %}
                        {% endfor %}
                        {{ active_count }}
                    </div>
                </div>
            </div>
        </div>
        
        <div class="bg-white p-6 rounded-xl shadow-md">
            <div class="flex items-center">
                <div class="w-14 h-14 rounded-full bg-amber-100 flex items-center justify-center mr-4">
                    <i class="fas fa-chalkboard-teacher text-amber-600 text-2xl"></i>
                </div>
                <div>
                    <div class="text-gray-500 text-sm font-medium">Assigned Teachers</div>
                    <div class="text-2xl font-bold text-gray-800">
                        {% set teacher_ids = [] %}
                        {% for student in students %}
                            {% if student.teacher_id and student.teacher_id not in teacher_ids %}
                                {% set _ = teacher_ids.append(student.teacher_id) %}
                            {% endif %}
                        {% endfor %}
                        {{ teacher_ids|length }}
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Add Student Card and Search -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
        <!-- Add Student Form -->
        <div class="lg:col-span-1">
            <div class="bg-white rounded-xl shadow-md overflow-hidden" id="add-student">
                <div class="bg-gradient-to-r from-indigo-600 to-blue-500 p-4">
                    <h2 class="text-xl font-bold text-white flex items-center">
                        <i class="fas fa-user-plus mr-2"></i> Add New Student
                    </h2>
                </div>
                
                <div class="p-6">
                    <form action="{{ url_for('admin.add_student') }}" method="POST" class="space-y-4 admin-form">
                        {{ form.csrf_token }}
                        
                        <div class="form-control">
                            <label class="label">
                                <span class="label-text">Full Name</span>
                            </label>
                            {{ form.username(class="input input-bordered w-full", placeholder="Enter full name") }}
                        </div>
                        
                        <div class="form-control">
                            <label class="label">
                                <span class="label-text">Email</span>
                            </label>
                            {{ form.email(class="input input-bordered w-full", placeholder="Email address") }}
                        </div>
                        
                        <div class="grid grid-cols-2 gap-4">
                            <div class="form-control">
                                <label class="label">
                                    <span class="label-text">Roll Number</span>
                                </label>
                                {{ form.roll_number(class="input input-bordered w-full", placeholder="Student ID") }}
                            </div>
                            
                            <div class="form-control">
                                <label class="label">
                                    <span class="label-text">Section</span>
                                </label>
                                {{ form.section(class="input input-bordered w-full", placeholder="e.g. A, B") }}
                            </div>
                        </div>
                        
                        <div class="grid grid-cols-2 gap-4">
                            <div class="form-control">
                                <label class="label">
                                    <span class="label-text">Program</span>
                                </label>
                                {{ form.program(class="select select-bordered w-full") }}
                            </div>
                            
                            <div class="form-control">
                                <label class="label">
                                    <span class="label-text">Department</span>
                                </label>
                                {{ form.department(class="select select-bordered w-full") }}
                            </div>
                        </div>
                        
                        <div class="form-control">
                            <label class="label">
                                <span class="label-text">Assigned Teacher</span>
                            </label>
                            {{ form.teacher(class="select select-bordered w-full") }}
                        </div>
                        
                        <div class="form-control">
                            <label class="label">
                                <span class="label-text">Password</span>
                            </label>
                            {{ form.password(class="input input-bordered w-full", placeholder="Secure password") }}
                        </div>
                        
                        <div class="form-control mt-6">
                            <button type="submit" class="btn btn-primary w-full gap-2">
                                <i class="fas fa-user-plus"></i> Add Student
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            
            <!-- Student Export Card -->
            <div class="bg-white rounded-xl shadow-md overflow-hidden mt-8">
                <div class="p-6">
                    <h3 class="font-bold text-xl mb-4">Export Student Data</h3>
                    <p class="text-gray-600 mb-6">Download student information for record keeping or analysis.</p>
                    
                    <a href="{{ url_for('admin.export_students') }}" class="btn btn-outline w-full gap-2">
                        <i class="fas fa-file-csv"></i> Export to CSV
                    </a>
                </div>
            </div>
        </div>
        
        <!-- Student List -->
        <div class="lg:col-span-2">
            <div class="bg-white rounded-xl shadow-md overflow-hidden">
                <div class="p-6 border-b border-gray-200">
                    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                        <h2 class="text-xl font-bold text-gray-800">Student Accounts</h2>
                        
                        <div class="flex flex-col sm:flex-row gap-3">
                            <div class="relative">
                                <input type="text" id="studentSearch" class="w-full md:w-64 pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary" placeholder="Search students...">
                                <span class="absolute left-3 top-2.5 text-gray-400">
                                    <i class="fas fa-search"></i>
                                </span>
                            </div>
                            
                            <select id="programFilter" class="select select-bordered">
                                <option value="">All Programs</option>
                                <option value="bs">BS</option>
                                <option value="masters">Masters</option>
                                <option value="phd">Ph.D</option>
                            </select>
                        </div>
                    </div>
                </div>
                
                <div class="overflow-x-auto">
                    <div class="student-list divide-y divide-gray-100">
                        {% if students %}
                            {% for student in students %}
                            <div class="student-item p-6 hover:bg-gray-50 transition-colors duration-150" 
                                 data-name="{{ student.username }}" 
                                 data-email="{{ student.email }}"
                                 data-program="{{ student.program }}"
                                 data-department="{{ student.department }}">
                                <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between">
                                    <div class="flex items-start gap-4 mb-4 lg:mb-0">
                                        <div class="avatar placeholder">
                                            <div class="w-14 h-14 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center">
                                                {% if student.username|length > 0 %}
                                                    <span class="text-xl font-medium">{{ student.username[0]|upper }}</span>
                                                {% else %}
                                                    <i class="fas fa-user"></i>
                                                {% endif %}
                                            </div>
                                        </div>
                                        
                                        <div>
                                            <div class="flex items-baseline gap-2">
                                                <h3 class="text-lg font-semibold text-gray-900">{{ student.username }}</h3>
                                                <span class="badge {{ 'badge-success' if student.is_approved else 'badge-warning' }}">
                                                    {{ 'Active' if student.is_approved else 'Pending' }}
                                                </span>
                                            </div>
                                            <div class="text-sm text-gray-500 flex items-center">
                                                <i class="fas fa-envelope mr-1"></i> {{ student.email }}
                                            </div>
                                            <div class="mt-1 flex flex-wrap items-center gap-2 text-sm text-gray-600">
                                                <span class="inline-flex items-center gap-1">
                                                    <i class="fas fa-id-card text-xs"></i> {{ student.roll_number }}
                                                </span>
                                                {% if student.section %}
                                                <span class="mx-1">•</span>
                                                <span>Section {{ student.section }}</span>
                                                {% endif %}
                                                <span class="mx-1">•</span>
                                                <span>{{ student.program|upper }}</span>
                                                <span class="mx-1">•</span>
                                                <span>{{ student.department|replace('_', ' ')|title }}</span>
                                            </div>
                                            {% if student.teacher %}
                                            <div class="mt-1.5">
                                                <span class="text-xs bg-blue-50 text-blue-700 px-2 py-1 rounded-md border border-blue-100 inline-flex items-center">
                                                    <i class="fas fa-chalkboard-teacher mr-1"></i>
                                                    {{ student.teacher.username }}
                                                </span>
                                            </div>
                                            {% endif %}
                                        </div>
                                    </div>
                                    
                                    <div class="flex flex-wrap justify-end gap-2">
                                        <a href="{{ url_for('admin.view_student', student_id=student.id) }}" class="btn btn-sm btn-outline gap-1">
                                            <i class="fas fa-eye"></i> View
                                        </a>
                                        <a href="{{ url_for('admin.edit_student', student_id=student.id) }}" class="btn btn-sm btn-outline gap-1">
                                            <i class="fas fa-edit"></i> Edit
                                        </a>
                                        
                                        {% if student.progress_records.count() == 0 %}
                                        <button class="btn btn-sm btn-error gap-1 delete-student-btn" data-id="{{ student.id }}" data-name="{{ student.username }}">
                                            <i class="fas fa-trash-alt"></i> Delete
                                        </button>
                                        {% else %}
                                        <button class="btn btn-sm btn-disabled gap-1" title="Cannot delete student with progress records">
                                            <i class="fas fa-trash-alt"></i> Delete
                                        </button>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        {% else %}
                            <div class="p-8 text-center">
                                <div class="w-16 h-16 mx-auto rounded-full bg-gray-100 flex items-center justify-center mb-4">
                                    <i class="fas fa-user-graduate text-gray-400 text-2xl"></i>
                                </div>
                                <h3 class="text-lg font-medium text-gray-900 mb-1">No Students Available</h3>
                                <p class="text-gray-500">Start by adding new students to the system.</p>
                            </div>
                        {% endif %}
                    </div>
                    
                    <!-- No results message (hidden by default) -->
                    <div id="noSearchResults" class="hidden p-8 text-center">
                        <div class="w-16 h-16 mx-auto rounded-full bg-gray-100 flex items-center justify-center mb-4">
                            <i class="fas fa-search text-gray-400 text-2xl"></i>
                        </div>
                        <h3 class="text-lg font-medium text-gray-900 mb-1">No Results Found</h3>
                        <p class="text-gray-500">Try adjusting your search term or filters.</p>
                        <button id="resetSearch" class="btn btn-primary btn-sm mt-4">
                            <i class="fas fa-undo mr-2"></i> Reset Filters
                        </button>
                    </div>
                </div>
                
                <!-- Pagination controls (if needed in the future) -->
                <div class="p-4 border-t border-gray-100 flex justify-between items-center">
                    <div class="text-sm text-gray-500">
                        Showing <span class="font-medium text-gray-700" id="shownCount">{{ students|length }}</span> of <span class="font-medium text-gray-700">{{ students|length }}</span> students
                    </div>
                    <div class="flex gap-2">
                        <button class="btn btn-sm btn-ghost btn-disabled">
                            <i class="fas fa-chevron-left"></i>
                        </button>
                        <button class="btn btn-sm btn-ghost btn-disabled">
                            <i class="fas fa-chevron-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Confirmation Modal -->
<div id="deleteModal" class="modal">
    <div class="modal-box">
        <h3 class="font-bold text-lg text-error">Confirm Deletion</h3>
        <p class="py-4">Are you sure you want to delete student <span id="deleteStudentName" class="font-semibold"></span>? This action cannot be undone.</p>
        <div class="modal-action">
            <button id="cancelDelete" class="btn">Cancel</button>
            <button id="confirmDelete" class="btn btn-error">Delete</button>
        </div>
    </div>
</div>

<!-- Success Toast -->
<div id="successToast" class="toast toast-end hidden">
    <div class="alert alert-success">
        <i class="fas fa-check-circle"></i>
        <span id="successMessage">Student deleted successfully!</span>
    </div>
</div>

<!-- Error Toast -->
<div id="errorToast" class="toast toast-end hidden">
    <div class="alert alert-error">
        <i class="fas fa-exclamation-circle"></i>
        <span id="errorMessage">An error occurred.</span>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Delete student functionality
    const deleteButtons = document.querySelectorAll('.delete-student-btn');
    const deleteModal = document.getElementById('deleteModal');
    const deleteStudentName = document.getElementById('deleteStudentName');
    const cancelDelete = document.getElementById('cancelDelete');
    const confirmDelete = document.getElementById('confirmDelete');
    const successToast = document.getElementById('successToast');
    const errorToast = document.getElementById('errorToast');
    const successMessage = document.getElementById('successMessage');
    const errorMessage = document.getElementById('errorMessage');
    
    let studentIdToDelete = null;
    
    // Show delete confirmation modal
    deleteButtons.forEach(button => {
        button.addEventListener('click', function() {
            studentIdToDelete = this.getAttribute('data-id');
            deleteStudentName.textContent = this.getAttribute('data-name');
            deleteModal.classList.add('modal-open');
        });
    });
    
    // Cancel delete
    cancelDelete.addEventListener('click', function() {
        deleteModal.classList.remove('modal-open');
        studentIdToDelete = null;
    });
    
    // Confirm delete
    confirmDelete.addEventListener('click', function() {
        if (!studentIdToDelete) return;
        
        fetch(`/admin/students/${studentIdToDelete}`, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json'
            },
        })
        .then(response => response.json())
        .then(data => {
            deleteModal.classList.remove('modal-open');
            
            if (data.error) {
                // Show error message
                errorMessage.textContent = data.error;
                errorToast.classList.remove('hidden');
                setTimeout(() => {
                    errorToast.classList.add('hidden');
                }, 3000);
            } else {
                // Show success message
                successMessage.textContent = data.message;
                successToast.classList.remove('hidden');
                setTimeout(() => {
                    successToast.classList.add('hidden');
                    // Reload the page to reflect changes
                    window.location.reload();
                }, 1500);
            }
        })
        .catch(error => {
            deleteModal.classList.remove('modal-open');
            errorMessage.textContent = "An error occurred while deleting the student.";
            errorToast.classList.remove('hidden');
            setTimeout(() => {
                errorToast.classList.add('hidden');
            }, 3000);
            console.error('Error:', error);
        });
    });
    
    // Search and filter functionality
    const searchInput = document.getElementById('studentSearch');
    const programFilter = document.getElementById('programFilter');
    const studentItems = document.querySelectorAll('.student-item');
    const noSearchResults = document.getElementById('noSearchResults');
    const resetSearchBtn = document.getElementById('resetSearch');
    const shownCount = document.getElementById('shownCount');
    
    function filterStudents() {
        const searchTerm = searchInput.value.toLowerCase();
        const programValue = programFilter.value.toLowerCase();
        let hasResults = false;
        let visibleCount = 0;
        
        studentItems.forEach(item => {
            const name = item.getAttribute('data-name').toLowerCase();
            const email = item.getAttribute('data-email').toLowerCase();
            const program = item.getAttribute('data-program').toLowerCase();
            
            const matchesSearch = name.includes(searchTerm) || email.includes(searchTerm);
            const matchesProgram = !programValue || program === programValue;
            
            if (matchesSearch && matchesProgram) {
                item.classList.remove('hidden');
                hasResults = true;
                visibleCount++;
            } else {
                item.classList.add('hidden');
            }
        });
        
        // Update visible count
        shownCount.textContent = visibleCount;
        
        if (!hasResults) {
            noSearchResults.classList.remove('hidden');
        } else {
            noSearchResults.classList.add('hidden');
        }
    }
    
    searchInput.addEventListener('input', filterStudents);
    programFilter.addEventListener('change', filterStudents);
    
    resetSearchBtn.addEventListener('click', function() {
        searchInput.value = '';
        programFilter.value = '';
        filterStudents();
    });
    
    // If URL has #add-student hash, focus on the add student form
    if (window.location.hash === '#add-student') {
        const form = document.querySelector('#add-student form');
        if (form) {
            form.querySelector('input').focus();
            // Scroll to the add student form
            document.getElementById('add-student').scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        }
    }
});
</script>
{% endblock %}