{% extends "base.html" %}

{% block content %}
<div class="space-y-6">
    <div class="flex justify-between items-center">
        <h1 class="text-3xl font-bold text-gray-900">Add New Student</h1>
        <a href="{{ url_for('teacher.manage_students') }}" class="btn btn-outline hover:bg-gray-100 transition-colors">
            Back to Students
        </a>
    </div>

    <div class="bg-white p-8 rounded-xl shadow-lg max-w-4xl mx-auto">
        <form method="POST" action="{{ url_for('teacher.add_student') }}" class="space-y-6">
            {{ form.hidden_tag() }}
            
            <!-- Basic Information -->
            <div class="bg-gray-50 p-6 rounded-lg mb-6">
                <h2 class="text-lg font-semibold text-gray-900 mb-4">Basic Information</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="form-control">
                        <label for="{{ form.student_name.id }}" class="label">
                            <span class="label-text">Student Name</span>
                        </label>
                        {{ form.student_name(class="input input-bordered w-full", placeholder="Enter student name") }}
                        {% if form.student_name.errors %}
                            {% for error in form.student_name.errors %}
                                <p class="text-error text-sm mt-1">{{ error }}</p>
                            {% endfor %}
                        {% endif %}
                    </div>

                    <div class="form-control">
                        <label for="{{ form.roll_number.id }}" class="label">
                            <span class="label-text">Roll Number</span>
                        </label>
                        {{ form.roll_number(class="input input-bordered w-full", placeholder="Enter roll number") }}
                        {% if form.roll_number.errors %}
                            {% for error in form.roll_number.errors %}
                                <p class="text-error text-sm mt-1">{{ error }}</p>
                            {% endfor %}
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- Academic Information -->
            <div class="bg-gray-50 p-6 rounded-lg mb-6">
                <h2 class="text-lg font-semibold text-gray-900 mb-4">Academic Information</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="form-control">
                        <label for="{{ form.department.id }}" class="label">
                            <span class="label-text">Department</span>
                        </label>
                        {{ form.department(class="input input-bordered w-full", placeholder="Enter department") }}
                        {% if form.department.errors %}
                            {% for error in form.department.errors %}
                                <p class="text-error text-sm mt-1">{{ error }}</p>
                            {% endfor %}
                        {% endif %}
                    </div>

                    <div class="form-control">
                        <label for="{{ form.program.id }}" class="label">
                            <span class="label-text">Program</span>
                        </label>
                        {{ form.program(class="input input-bordered w-full", placeholder="Enter program") }}
                        {% if form.program.errors %}
                            {% for error in form.program.errors %}
                                <p class="text-error text-sm mt-1">{{ error }}</p>
                            {% endfor %}
                        {% endif %}
                    </div>

                    <div class="form-control">
                        <label for="{{ form.semester.id }}" class="label">
                            <span class="label-text">Semester</span>
                        </label>
                        {{ form.semester(class="input input-bordered w-full", placeholder="Enter semester (1-12)") }}
                        {% if form.semester.errors %}
                            {% for error in form.semester.errors %}
                                <p class="text-error text-sm mt-1">{{ error }}</p>
                            {% endfor %}
                        {% endif %}
                    </div>

                    <div class="form-control">
                        <label for="{{ form.section.id }}" class="label">
                            <span class="label-text">Section</span>
                        </label>
                        {{ form.section(class="input input-bordered w-full", placeholder="Enter section") }}
                        {% if form.section.errors %}
                            {% for error in form.section.errors %}
                                <p class="text-error text-sm mt-1">{{ error }}</p>
                            {% endfor %}
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- Contact Information -->
            <div class="bg-gray-50 p-6 rounded-lg mb-6">
                <h2 class="text-lg font-semibold text-gray-900 mb-4">Contact Information</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="form-control">
                        <label for="{{ form.email.id }}" class="label">
                            <span class="label-text">Email Address</span>
                        </label>
                        {{ form.email(class="input input-bordered w-full", placeholder="Enter email address") }}
                        {% if form.email.errors %}
                            {% for error in form.email.errors %}
                                <p class="text-error text-sm mt-1">{{ error }}</p>
                            {% endfor %}
                        {% endif %}
                    </div>

                    <div class="form-control">
                        <label for="{{ form.phone_number.id }}" class="label">
                            <span class="label-text">Phone Number</span>
                        </label>
                        {{ form.phone_number(class="input input-bordered w-full", placeholder="Enter phone number") }}
                        {% if form.phone_number.errors %}
                            {% for error in form.phone_number.errors %}
                                <p class="text-error text-sm mt-1">{{ error }}</p>
                            {% endfor %}
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- Account Security -->
            <div class="bg-gray-50 p-6 rounded-lg mb-6">
                <h2 class="text-lg font-semibold text-gray-900 mb-4">Account Security</h2>
                <div class="form-control">
                    <label for="{{ form.password.id }}" class="label">
                        <span class="label-text">Password</span>
                    </label>
                    {{ form.password(class="input input-bordered w-full", placeholder="Enter password") }}
                    {% if form.password.errors %}
                        {% for error in form.password.errors %}
                            <p class="text-error text-sm mt-1">{{ error }}</p>
                        {% endfor %}
                    {% endif %}
                    <p class="text-sm text-gray-500 mt-2">
                        Password must be at least 6 characters long.
                    </p>
                </div>
            </div>

            <div class="flex justify-end space-x-4">
                {{ form.submit(class="btn btn-primary hover:bg-primary-focus transition-colors") }}
            </div>
        </form>
    </div>

    <!-- Information Panel -->
    <div class="alert alert-info shadow-lg">
        <div>
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current flex-shrink-0 w-6 h-6">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            <div>
                <h3 class="font-bold">Important Information</h3>
                <ul class="mt-2 list-disc list-inside space-y-1">
                    <li>Students will be automatically approved and assigned to your class.</li>
                    <li>They can immediately start accessing your topics after registration.</li>
                    <li>Login credentials will be sent to their email address.</li>
                    <li>You can manage their access from the student management dashboard.</li>
                </ul>
            </div>
        </div>
    </div>
</div>

{% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
        <div class="fixed bottom-4 right-4 z-50">
            {% for category, message in messages %}
                <div class="alert alert-{{ category }} mb-2">
                    {{ message }}
                </div>
            {% endfor %}
        </div>
    {% endif %}
{% endwith %}
{% endblock %}