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

{% block content %}
<div class="container mx-auto px-4 py-6">
    <!-- Breadcrumb navigation -->
    <div class="text-sm breadcrumbs mb-6">
        <ul>
            <li><a href="{{ url_for('admin.dashboard') }}" class="text-gray-500 hover:text-primary">Dashboard</a></li>
            <li><a href="{{ url_for('admin.manage_teachers') }}" class="text-gray-500 hover:text-primary">Teachers</a></li>
            <li class="text-primary font-medium">Edit Teacher</li>
        </ul>
    </div>

    <!-- Page Header with teacher info -->
    <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 gap-4">
            <div class="flex items-center gap-4">
                <div class="avatar placeholder">
                    <div class="w-16 h-16 rounded-full bg-cyan-100 text-cyan-600 flex items-center justify-center">
                        {% if teacher.username|length > 0 %}
                            <span class="text-2xl font-medium">{{ teacher.username[0]|upper }}</span>
                        {% else %}
                            <i class="fas fa-user text-2xl"></i>
                        {% endif %}
                    </div>
                </div>
                <div>
                    <h1 class="text-2xl md:text-3xl font-bold text-gray-900">Edit Teacher Profile</h1>
                    <p class="text-gray-600">{{ teacher.email }}</p>
                </div>
            </div>
            <div class="flex flex-wrap gap-3">
                <a href="{{ url_for('admin.manage_teachers') }}" class="btn btn-outline btn-sm gap-2">
                    <i class="fas fa-arrow-left"></i> Back to Teachers
                </a>
                <a href="#basic-info" class="btn btn-primary btn-sm gap-2">
                    <i class="fas fa-edit"></i> Edit Information
                </a>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- Teacher Stats Card -->
        <div class="lg:col-span-1">
            <div class="bg-white rounded-xl shadow-md overflow-hidden">
                <div class="bg-gradient-to-r from-cyan-600 to-primary p-4">
                    <h2 class="text-xl font-bold text-white flex items-center">
                        <i class="fas fa-chart-bar mr-2"></i> Teacher Statistics
                    </h2>
                </div>
                
                <div class="p-6 space-y-6">
                    <!-- Student count -->
                    <div class="flex items-center gap-4">
                        <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center">
                            <i class="fas fa-user-graduate text-indigo-600 text-xl"></i>
                        </div>
                        <div>
                            <div class="text-sm text-gray-500">Students Assigned</div>
                            <div class="text-2xl font-bold text-gray-800">{{ teacher.students.count() }}</div>
                        </div>
                    </div>
                    
                    <!-- Topics count -->
                    <div class="flex items-center gap-4">
                        <div class="w-12 h-12 rounded-full bg-amber-100 flex items-center justify-center">
                            <i class="fas fa-book text-amber-600 text-xl"></i>
                        </div>
                        <div>
                            <div class="text-sm text-gray-500">Topics Created</div>
                            <div class="text-2xl font-bold text-gray-800">{{ teacher.topics.count() }}</div>
                        </div>
                    </div>
                    
                    <!-- Account details -->
                    <div class="flex items-center gap-4">
                        <div class="w-12 h-12 rounded-full bg-emerald-100 flex items-center justify-center">
                            <i class="fas fa-user-shield text-emerald-600 text-xl"></i>
                        </div>
                        <div>
                            <div class="text-sm text-gray-500">Account Status</div>
                            <div class="font-medium text-emerald-600">
                                <span class="badge badge-success">Active</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Created date -->
                    <div class="flex items-center gap-4">
                        <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
                            <i class="fas fa-calendar-alt text-blue-600 text-xl"></i>
                        </div>
                        <div>
                            <div class="text-sm text-gray-500">Account Created</div>
                            <div class="font-medium text-gray-700">{{ teacher.created_at.strftime('%B %d, %Y') }}</div>
                        </div>
                    </div>

                    <!-- Divider with quick actions -->
                    <div class="pt-4">
                        <div class="divider text-xs text-gray-400 uppercase font-semibold tracking-wider">Quick Actions</div>
                        <div class="space-y-2">
                            <a href="#" class="btn btn-outline btn-sm w-full justify-start gap-2">
                                <i class="fas fa-users"></i> View Students
                            </a>
                            <a href="#" class="btn btn-outline btn-sm w-full justify-start gap-2">
                                <i class="fas fa-book"></i> View Topics
                            </a>
                            <a href="#" class="btn btn-outline btn-sm w-full justify-start gap-2">
                                <i class="fas fa-envelope"></i> Send Message
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Edit Form -->
        <div class="lg:col-span-2">
            <div class="bg-white rounded-xl shadow-md overflow-hidden" id="basic-info">
                <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-edit mr-2"></i> Edit Teacher Information
                    </h2>
                </div>
                
                <div class="p-6">
                    <form action="{{ url_for('admin.edit_teacher', teacher_id=teacher.id) }}" method="POST" class="space-y-6 admin-form">
                        {{ form.csrf_token }}
                        
                        <!-- Form fields section -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="form-control">
                                <label class="label">
                                    <span class="label-text font-medium">Username</span>
                                </label>
                                {{ form.username(class="input input-bordered w-full focus:ring-2 focus:ring-primary focus:border-primary", placeholder="Enter username") }}
                                {% if form.username.errors %}
                                <div class="text-error text-sm mt-1">
                                    {% for error in form.username.errors %}
                                    <p>{{ error }}</p>
                                    {% endfor %}
                                </div>
                                {% endif %}
                                <label class="label">
                                    <span class="label-text-alt text-gray-500">This will be used for login and display</span>
                                </label>
                            </div>
                            
                            <div class="form-control">
                                <label class="label">
                                    <span class="label-text font-medium">Email Address</span>
                                </label>
                                {{ form.email(class="input input-bordered w-full focus:ring-2 focus:ring-primary focus:border-primary", placeholder="Email address") }}
                                {% if form.email.errors %}
                                <div class="text-error text-sm mt-1">
                                    {% for error in form.email.errors %}
                                    <p>{{ error }}</p>
                                    {% endfor %}
                                </div>
                                {% endif %}
                                <label class="label">
                                    <span class="label-text-alt text-gray-500">Email will be used for notifications</span>
                                </label>
                            </div>
                        </div>
                        
                        <!-- Password section -->
                        <div class="bg-gray-50 p-4 rounded-lg border border-gray-100">
                            <h3 class="font-semibold text-lg mb-4 text-gray-700 flex items-center">
                                <i class="fas fa-lock text-primary mr-2"></i> Change Password (Optional)
                            </h3>
                            
                            <div class="text-sm text-gray-500 mb-4">
                                Leave the password fields blank if you don't want to change the password.
                            </div>
                            
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div class="form-control">
                                    <label class="label">
                                        <span class="label-text font-medium">New Password</span>
                                    </label>
                                    {{ form.password(class="input input-bordered w-full focus:ring-2 focus:ring-primary focus:border-primary", placeholder="New password") }}
                                    {% if form.password.errors %}
                                    <div class="text-error text-sm mt-1">
                                        {% for error in form.password.errors %}
                                        <p>{{ error }}</p>
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                                
                                <div class="form-control">
                                    <label class="label">
                                        <span class="label-text font-medium">Confirm New Password</span>
                                    </label>
                                    {{ form.confirm_password(class="input input-bordered w-full focus:ring-2 focus:ring-primary focus:border-primary", placeholder="Confirm password") }}
                                    {% if form.confirm_password.errors %}
                                    <div class="text-error text-sm mt-1">
                                        {% for error in form.confirm_password.errors %}
                                        <p>{{ error }}</p>
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        
                        <!-- Submit buttons -->
                        <div class="flex flex-col sm:flex-row gap-3 pt-4">
                            <a href="{{ url_for('admin.manage_teachers') }}" class="btn btn-outline flex-1 gap-2">
                                <i class="fas fa-times"></i> Cancel
                            </a>
                            <button type="submit" class="btn btn-primary flex-1 gap-2">
                                <i class="fas fa-save"></i> Save Changes
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            
            <!-- Delete account section (only visible if teacher can be deleted) -->
            {% if teacher.students.count() == 0 and teacher.topics.count() == 0 %}
            <div class="bg-white rounded-xl shadow-md overflow-hidden mt-8">
                <div class="bg-red-600 p-4">
                    <h2 class="text-xl font-bold text-white flex items-center">
                        <i class="fas fa-exclamation-triangle mr-2"></i> Danger Zone
                    </h2>
                </div>
                
                <div class="p-6">
                    <h3 class="font-semibold text-lg mb-2 text-gray-700">Delete Teacher Account</h3>
                    <p class="text-gray-600 mb-4">
                        Once you delete a teacher account, there is no going back. Please be certain.
                    </p>
                    
                    <button class="btn btn-error gap-2 delete-teacher-btn" data-id="{{ teacher.id }}" data-name="{{ teacher.username }}">
                        <i class="fas fa-trash-alt"></i> Delete Teacher Account
                    </button>
                </div>
            </div>
            {% endif %}
        </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>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Delete teacher functionality
    const deleteButton = document.querySelector('.delete-teacher-btn');
    if (deleteButton) {
        const deleteModal = document.getElementById('deleteModal');
        const deleteTeacherName = document.getElementById('deleteTeacherName');
        const cancelDelete = document.getElementById('cancelDelete');
        const confirmDelete = document.getElementById('confirmDelete');
        
        deleteButton.addEventListener('click', function() {
            const teacherId = this.getAttribute('data-id');
            const teacherName = this.getAttribute('data-name');
            
            deleteTeacherName.textContent = teacherName;
            deleteModal.classList.add('modal-open');
            
            confirmDelete.addEventListener('click', function() {
                fetch(`/admin/teachers/${teacherId}`, {
                    method: 'DELETE',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                })
                .then(response => response.json())
                .then(data => {
                    deleteModal.classList.remove('modal-open');
                    
                    if (data.error) {
                        alert(data.error);
                    } else {
                        window.location.href = "{{ url_for('admin.manage_teachers') }}";
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('An error occurred while deleting the teacher.');
                    deleteModal.classList.remove('modal-open');
                });
            });
            
            cancelDelete.addEventListener('click', function() {
                deleteModal.classList.remove('modal-open');
            });
        });
    }
});
</script>
{% endblock %}