{% 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 Teachers</h1>
                <p class="text-gray-600">Add, edit or remove teacher 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-cyan-100 flex items-center justify-center mr-4">
                    <i class="fas fa-chalkboard-teacher text-cyan-600 text-2xl"></i>
                </div>
                <div>
                    <div class="text-gray-500 text-sm font-medium">Total Teachers</div>
                    <div class="text-2xl font-bold text-gray-800">{{ teachers|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-blue-100 flex items-center justify-center mr-4">
                    <i class="fas fa-book-open text-blue-600 text-2xl"></i>
                </div>
                <div>
                    <div class="text-gray-500 text-sm font-medium">Total Topics Created</div>
                    <div class="text-2xl font-bold text-gray-800">
                        {% set topic_count = 0 %}
                        {% for teacher in teachers %}
                            {% set topic_count = topic_count + teacher.topics.count() %}
                        {% endfor %}
                        {{ topic_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-green-100 flex items-center justify-center mr-4">
                    <i class="fas fa-user-graduate text-green-600 text-2xl"></i>
                </div>
                <div>
                    <div class="text-gray-500 text-sm font-medium">Total Students Assigned</div>
                    <div class="text-2xl font-bold text-gray-800">
                        {% set student_count = 0 %}
                        {% for teacher in teachers %}
                            {% set student_count = student_count + teacher.students.count() %}
                        {% endfor %}
                        {{ student_count }}
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Add Teacher Card and Search -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
        <!-- Add Teacher Form -->
        <div class="lg:col-span-1">
            <div class="bg-white rounded-xl shadow-md overflow-hidden">
                <div class="bg-gradient-to-r from-primary to-cyan-600 p-4">
                    <h2 class="text-xl font-bold text-white flex items-center">
                        <i class="fas fa-user-plus mr-2"></i> Add New Teacher
                    </h2>
                </div>
                
                <div class="p-6">
                    <form id="add-teacher" action="{{ url_for('admin.add_teacher') }}" method="POST" class="space-y-4 admin-form">
                        {{ form.csrf_token }}
                        
                        <div class="form-control">
                            <label class="label">
                                <span class="label-text">Username</span>
                            </label>
                            {{ form.username(class="input input-bordered w-full", placeholder="Enter username") }}
                        </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="form-control">
                            <label class="label">
                                <span class="label-text">Password</span>
                            </label>
                            {{ form.password(class="input input-bordered w-full", placeholder="Secure password") }}
                        </div>
                        
                        <!-- Remove this field since it doesn't exist in TeacherForm -->
                        
                        <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 Teacher
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
        <!-- Teacher 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">Teacher Accounts</h2>
                        
                        <div class="relative">
                            <input type="text" id="teacherSearch" 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 teachers...">
                            <span class="absolute left-3 top-2.5 text-gray-400">
                                <i class="fas fa-search"></i>
                            </span>
                        </div>
                    </div>
                </div>
                
                <div class="overflow-x-auto">
                    <div class="teacher-list divide-y divide-gray-100">
                        {% if teachers %}
                            {% for teacher in teachers %}
                            <div class="teacher-item p-6 hover:bg-gray-50 transition-colors duration-150" data-name="{{ teacher.username }}" data-email="{{ teacher.email }}">
                                <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-cyan-100 text-cyan-600 flex items-center justify-center">
                                                {% if teacher.username|length > 0 %}
                                                    <span class="text-xl font-medium">{{ teacher.username[0]|upper }}</span>
                                                {% else %}
                                                    <i class="fas fa-user"></i>
                                                {% endif %}
                                            </div>
                                        </div>
                                        
                                        <div>
                                            <h3 class="text-lg font-semibold text-gray-900">{{ teacher.username }}</h3>
                                            <div class="text-sm text-gray-500 flex items-center">
                                                <i class="fas fa-envelope mr-1"></i> {{ teacher.email }}
                                            </div>
                                            <div class="mt-1 flex flex-wrap gap-2">
                                                <span class="badge badge-outline">{{ teacher.students.count() }} Students</span>
                                                <span class="badge badge-outline">{{ teacher.topics.count() }} Topics</span>
                                                <span class="badge badge-success">Active</span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="flex flex-wrap justify-end gap-2">
                                        <a href="{{ url_for('admin.edit_teacher', teacher_id=teacher.id) }}" class="btn btn-sm btn-outline gap-1">
                                            <i class="fas fa-edit"></i> Edit
                                        </a>
                                        
                                        {% if teacher.students.count() == 0 and teacher.topics.count() == 0 %}
                                        <button class="btn btn-sm btn-error gap-1 delete-teacher-btn" data-id="{{ teacher.id }}" data-name="{{ teacher.username }}">
                                            <i class="fas fa-trash-alt"></i> Delete
                                        </button>
                                        {% else %}
                                        <button class="btn btn-sm btn-disabled gap-1" title="Cannot delete teacher with students or topics">
                                            <i class="fas fa-trash-alt"></i> Delete
                                        </button>
                                        {% endif %}
                                        
                                        <div class="dropdown dropdown-end">
                                            <label tabindex="0" class="btn btn-sm btn-ghost">
                                                <i class="fas fa-ellipsis-v"></i>
                                            </label>
                                            <ul tabindex="0" class="dropdown-content z-10 menu p-2 shadow bg-base-100 rounded-box w-52">
                                                <li><a href="#" class="view-students-btn" data-id="{{ teacher.id }}">
                                                    <i class="fas fa-users"></i> View Students
                                                </a></li>
                                                <li><a href="#" class="view-topics-btn" data-id="{{ teacher.id }}">
                                                    <i class="fas fa-book"></i> View Topics
                                                </a></li>
                                                <li><a href="#" class="send-message-btn" data-id="{{ teacher.id }}">
                                                    <i class="fas fa-envelope"></i> Send Message
                                                </a></li>
                                            </ul>
                                        </div>
                                    </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-chalkboard-teacher text-gray-400 text-2xl"></i>
                                </div>
                                <h3 class="text-lg font-medium text-gray-900 mb-1">No Teachers Available</h3>
                                <p class="text-gray-500">Start by adding a new teacher 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.</p>
                        <button id="resetSearch" class="btn btn-primary btn-sm mt-4">
                            <i class="fas fa-undo mr-2"></i> Reset Search
                        </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 teacher <span id="deleteTeacherName" 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">Teacher 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 teacher functionality
    const deleteButtons = document.querySelectorAll('.delete-teacher-btn');
    const deleteModal = document.getElementById('deleteModal');
    const deleteTeacherName = document.getElementById('deleteTeacherName');
    const cancelDelete = document.getElementById('cancelDelete');
    const confirmDelete = document.getElementById('confirmDelete');
    const successToast = document.getElementById('successToast');
    const errorToast = document.getElementById('errorToast');
    
    let teacherIdToDelete = null;
    
    // Show delete confirmation modal
    deleteButtons.forEach(button => {
        button.addEventListener('click', function() {
            teacherIdToDelete = this.getAttribute('data-id');
            deleteTeacherName.textContent = this.getAttribute('data-name');
            deleteModal.classList.add('modal-open');
        });
    });
    
    // Cancel delete
    cancelDelete.addEventListener('click', function() {
        deleteModal.classList.remove('modal-open');
        teacherIdToDelete = null;
    });
    
    // Confirm delete
    confirmDelete.addEventListener('click', function() {
        if (!teacherIdToDelete) return;
        
        fetch(`/admin/teachers/${teacherIdToDelete}`, {
            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 teacher.";
            errorToast.classList.remove('hidden');
            setTimeout(() => {
                errorToast.classList.add('hidden');
            }, 3000);
            console.error('Error:', error);
        });
    });
    
    // Search functionality
    const searchInput = document.getElementById('teacherSearch');
    const teacherItems = document.querySelectorAll('.teacher-item');
    const noSearchResults = document.getElementById('noSearchResults');
    const resetSearchBtn = document.getElementById('resetSearch');
    
    searchInput.addEventListener('input', function() {
        const searchTerm = this.value.toLowerCase();
        let hasResults = false;
        
        teacherItems.forEach(item => {
            const name = item.getAttribute('data-name').toLowerCase();
            const email = item.getAttribute('data-email').toLowerCase();
            
            if (name.includes(searchTerm) || email.includes(searchTerm)) {
                item.classList.remove('hidden');
                hasResults = true;
            } else {
                item.classList.add('hidden');
            }
        });
        
        if (!hasResults) {
            noSearchResults.classList.remove('hidden');
        } else {
            noSearchResults.classList.add('hidden');
        }
    });
    
    resetSearchBtn.addEventListener('click', function() {
        searchInput.value = '';
        teacherItems.forEach(item => {
            item.classList.remove('hidden');
        });
        noSearchResults.classList.add('hidden');
    });
    
    // View students button functionality (placeholder)
    document.querySelectorAll('.view-students-btn').forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.preventDefault();
            const teacherId = this.getAttribute('data-id');
            window.location.href = `/admin/teachers/${teacherId}/students`;
        });
    });
    
    // View topics button functionality (placeholder)
    document.querySelectorAll('.view-topics-btn').forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.preventDefault();
            const teacherId = this.getAttribute('data-id');
            window.location.href = `/admin/teachers/${teacherId}/topics`;
        });
    });
    
    // Send message button functionality (placeholder)
    document.querySelectorAll('.send-message-btn').forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.preventDefault();
            alert('Message functionality coming soon!');
        });
    });
});
</script>
{% endblock %}