{% extends "base.html" %}

{% block title %}Join Try English - Create Your Account{% endblock %}

{% block extra_css %}
<script src="https://cdn.tailwindcss.com"></script>
<style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
    body { font-family: 'Inter', sans-serif; }
    .gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
    .section-transition { transition: all 0.3s ease; }
    .form-input:focus { box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); }
</style>
{% endblock extra_css %}

{% block content %}
<!-- Main Content -->
<div class="bg-gray-50 min-h-screen">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <!-- Progress Header -->
        <div class="text-center mb-12">
            <h1 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                Join Try English AI
            </h1>
            <p class="text-xl text-gray-600 mb-8">
                Start your personalized English learning journey today
            </p>
            
            <!-- Progress Indicator -->
            <div class="flex items-center justify-center space-x-4 mb-8">
                <div class="flex items-center">
                    <div id="step1-indicator" class="w-10 h-10 bg-indigo-600 text-white rounded-full flex items-center justify-center font-semibold">
                        1
                    </div>
                    <span id="step1-text" class="ml-2 text-indigo-600 font-medium hidden sm:block">Personal Information</span>
                </div>
                <div class="w-16 h-1 bg-gray-200 rounded">
                    <div id="progress-bar" class="h-full bg-indigo-600 rounded transition-all duration-300" style="width: 50%"></div>
                </div>
                <div class="flex items-center">
                    <div id="step2-indicator" class="w-10 h-10 bg-gray-200 text-gray-500 rounded-full flex items-center justify-center font-semibold">
                        2
                    </div>
                    <span id="step2-text" class="ml-2 text-gray-500 font-medium hidden sm:block">Academic Information</span>
                </div>
            </div>
        </div>

        <!-- Signup Form -->
        <div class="bg-white rounded-2xl shadow-xl p-6 md:p-12">
            <form method="POST" id="signupForm">
                {{ form.hidden_tag() }}
                
                <!-- Section 1: Personal Information -->
                <div id="section1" class="section-transition">
                    <div class="mb-8">
                        <h2 class="text-2xl font-bold text-gray-900 mb-2">Personal Information</h2>
                        <p class="text-gray-600">Tell us a bit about yourself to get started</p>
                    </div>

                    <div class="grid md:grid-cols-2 gap-6 mb-6">
                        <div>
                            <label for="username" class="block text-sm font-medium text-gray-700 mb-2">
                                Full Name *
                            </label>
                            {{ form.username(class="form-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors", placeholder="Enter your full name", id="username") }}
                            {% if form.username.errors %}
                                <div class="mt-2 text-red-600 text-sm">
                                    {% for error in form.username.errors %}
                                        <p>{{ error }}</p>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                        <div>
                            <label for="email" class="block text-sm font-medium text-gray-700 mb-2">
                                Email Address *
                            </label>
                            {{ form.email(class="form-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors", placeholder="Enter your email address", id="email") }}
                            {% if form.email.errors %}
                                <div class="mt-2 text-red-600 text-sm">
                                    {% for error in form.email.errors %}
                                        <p>{{ error }}</p>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                    </div>

                    <div class="grid md:grid-cols-2 gap-6 mb-6">
                        <div>
                            <label for="password" class="block text-sm font-medium text-gray-700 mb-2">
                                Create Password *
                            </label>
                            {{ form.password(class="form-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors", placeholder="Create a strong password", id="password") }}
                            {% if form.password.errors %}
                                <div class="mt-2 text-red-600 text-sm">
                                    {% for error in form.password.errors %}
                                        <p>{{ error }}</p>
                                    {% endfor %}
                                </div>
                            {% endif %}
                            <p class="text-sm text-gray-500 mt-1">Password must be at least 8 characters long</p>
                        </div>
                        <div>
                            <label for="confirm_password" class="block text-sm font-medium text-gray-700 mb-2">
                                Confirm Password *
                            </label>
                            {{ form.confirm_password(class="form-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors", placeholder="Confirm your password", id="confirm_password") }}
                            {% if form.confirm_password.errors %}
                                <div class="mt-2 text-red-600 text-sm">
                                    {% for error in form.confirm_password.errors %}
                                        <p>{{ error }}</p>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                    </div>

                    {% if form.enrolling_course %}
                    <div class="mb-6">
                        <label for="enrolling_course" class="block text-sm font-medium text-gray-700 mb-2">Course (Optional)</label>
                        {% if form.enrolling_course.data %}
                            <select disabled class="form-input w-full px-4 py-3 border border-gray-300 rounded-lg bg-gray-100 text-gray-500" id="enrolling_course">
                                <option value="">Select a course (optional)</option>
                                {% for group in form.enrolling_course.choices[1:] %}
                                    <optgroup label="{{ group[0] }}">
                                        {% for value, label in group[1] %}
                                            <option value="{{ value }}" {% if form.enrolling_course.data == value %}selected{% endif %}>{{ label }}</option>
                                        {% endfor %}
                                    </optgroup>
                                {% endfor %}
                            </select>
                            <input type="hidden" name="enrolling_course" value="{{ form.enrolling_course.data }}">
                        {% else %}
                            <select name="enrolling_course" id="enrolling_course" class="form-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors">
                                <option value="">Select a course (optional)</option>
                                {% for group in form.enrolling_course.choices[1:] %}
                                    <optgroup label="{{ group[0] }}">
                                        {% for value, label in group[1] %}
                                            <option value="{{ value }}" {% if form.enrolling_course.data == value %}selected{% endif %}>{{ label }}</option>
                                        {% endfor %}
                                    </optgroup>
                                {% endfor %}
                            </select>
                        {% endif %}
                    </div>
                    {% endif %}

                    <div class="flex justify-end">
                        <button 
                            type="button" 
                            id="nextBtn"
                            class="bg-indigo-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-indigo-700 transition-colors focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
                        >
                            Next: Academic Information →
                        </button>
                    </div>
                </div>

                <!-- Section 2: Academic Information -->
                <div id="section2" class="section-transition hidden">
                    <div class="mb-8">
                        <h2 class="text-2xl font-bold text-gray-900 mb-2">Academic Information</h2>
                        <p class="text-gray-600">Help us personalize your learning experience</p>
                    </div>

                    <div class="grid md:grid-cols-2 gap-6 mb-6">
                        <div>
                            <label for="roll_number" class="block text-sm font-medium text-gray-700 mb-2">
                                Roll Number
                            </label>
                            {{ form.roll_number(class="form-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors", placeholder="Enter your roll number", id="roll_number") }}
                            {% if form.roll_number.errors %}
                                <div class="mt-2 text-red-600 text-sm">
                                    {% for error in form.roll_number.errors %}
                                        <p>{{ error }}</p>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                        <div>
                            <label for="section" class="block text-sm font-medium text-gray-700 mb-2">
                                Section
                            </label>
                            {{ form.section(class="form-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors", placeholder="Enter your section", id="section") }}
                            {% if form.section.errors %}
                                <div class="mt-2 text-red-600 text-sm">
                                    {% for error in form.section.errors %}
                                        <p>{{ error }}</p>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                    </div>

                    <div class="grid md:grid-cols-2 gap-6 mb-6">
                        <div>
                            <label for="program" class="block text-sm font-medium text-gray-700 mb-2">
                                Program
                            </label>
                            {{ form.program(class="form-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors", placeholder="Enter your program", id="program") }}
                            {% if form.program.errors %}
                                <div class="mt-2 text-red-600 text-sm">
                                    {% for error in form.program.errors %}
                                        <p>{{ error }}</p>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                        <div>
                            <label for="department" class="block text-sm font-medium text-gray-700 mb-2">
                                Department
                            </label>
                            {{ form.department(class="form-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors", placeholder="Enter your department", id="department") }}
                            {% if form.department.errors %}
                                <div class="mt-2 text-red-600 text-sm">
                                    {% for error in form.department.errors %}
                                        <p>{{ error }}</p>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                    </div>

                    <div class="flex justify-between">
                        <button 
                            type="button" 
                            id="backBtn"
                            class="bg-gray-200 text-gray-700 px-8 py-3 rounded-lg font-semibold hover:bg-gray-300 transition-colors"
                        >
                            ← Back
                        </button>
                        <button 
                            type="submit"
                            class="bg-indigo-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-indigo-700 transition-colors focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
                        >
                            Create Account
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <!-- Benefits Section -->
        <div class="mt-12 text-center">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">What you'll get:</h3>
            <div class="grid md:grid-cols-3 gap-6">
                <div class="flex items-center justify-center">
                    <svg class="w-5 h-5 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                    </svg>
                    <span class="text-gray-600">Interactive learning modules</span>
                </div>
                <div class="flex items-center justify-center">
                    <svg class="w-5 h-5 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                    </svg>
                    <span class="text-gray-600">Personalized AI assessment</span>
                </div>
                <div class="flex items-center justify-center">
                    <svg class="w-5 h-5 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                    </svg>
                    <span class="text-gray-600">Expert teacher guidance</span>
                </div>
            </div>
        </div>

        <!-- Sign In Link -->
        <div class="mt-12 text-center">
            <p class="text-gray-600">
                Already have an account? 
                <a href="{{ url_for('auth.login') }}" class="text-indigo-600 hover:text-indigo-700 font-medium transition-colors">
                    Sign In
                </a>
            </p>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const section1 = document.getElementById('section1');
    const section2 = document.getElementById('section2');
    const nextBtn = document.getElementById('nextBtn');
    const backBtn = document.getElementById('backBtn');
    const step1Indicator = document.getElementById('step1-indicator');
    const step2Indicator = document.getElementById('step2-indicator');
    const step1Text = document.getElementById('step1-text');
    const step2Text = document.getElementById('step2-text');
    const progressBar = document.getElementById('progress-bar');
    const signupForm = document.getElementById('signupForm');

    // Validate section 1 fields
    function validateSection1() {
        const requiredFields = ['username', 'email', 'password', 'confirm_password'];
        let isValid = true;
        
        requiredFields.forEach(fieldId => {
            const field = document.getElementById(fieldId);
            if (!field || !field.value.trim()) {
                isValid = false;
                if (field) field.classList.add('border-red-500');
            } else {
                field.classList.remove('border-red-500');
            }
        });

        // Email validation
        const email = document.getElementById('email');
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (email && email.value && !emailRegex.test(email.value)) {
            isValid = false;
            email.classList.add('border-red-500');
        }

        // Password validation
        const password = document.getElementById('password');
        const confirmPassword = document.getElementById('confirm_password');
        if (password && password.value && password.value.length < 8) {
            isValid = false;
            password.classList.add('border-red-500');
        }

        // Password match validation
        if (password && confirmPassword && password.value !== confirmPassword.value) {
            isValid = false;
            confirmPassword.classList.add('border-red-500');
        }

        return isValid;
    }

    // Next button click handler
    nextBtn.addEventListener('click', function(e) {
        e.preventDefault();
        
        if (validateSection1()) {
            // Hide section 1, show section 2
            section1.classList.add('hidden');
            section2.classList.remove('hidden');
            
            // Update progress indicators
            step1Indicator.classList.remove('bg-indigo-600', 'text-white');
            step1Indicator.classList.add('bg-green-500', 'text-white');
            step1Indicator.innerHTML = '✓';
            step1Text.classList.remove('text-indigo-600');
            step1Text.classList.add('text-green-500');
            
            step2Indicator.classList.remove('bg-gray-200', 'text-gray-500');
            step2Indicator.classList.add('bg-indigo-600', 'text-white');
            step2Text.classList.remove('text-gray-500');
            step2Text.classList.add('text-indigo-600');
            
            progressBar.style.width = '100%';
            
            // Scroll to top
            window.scrollTo({ top: 0, behavior: 'smooth' });
        } else {
            alert('Please fill in all required fields correctly.');
        }
    });

    // Back button click handler
    backBtn.addEventListener('click', function(e) {
        e.preventDefault();
        
        // Show section 1, hide section 2
        section2.classList.add('hidden');
        section1.classList.remove('hidden');
        
        // Update progress indicators
        step1Indicator.classList.remove('bg-green-500');
        step1Indicator.classList.add('bg-indigo-600', 'text-white');
        step1Indicator.innerHTML = '1';
        step1Text.classList.remove('text-green-500');
        step1Text.classList.add('text-indigo-600');
        
        step2Indicator.classList.remove('bg-indigo-600', 'text-white');
        step2Indicator.classList.add('bg-gray-200', 'text-gray-500');
        step2Text.classList.remove('text-indigo-600');
        step2Text.classList.add('text-gray-500');
        
        progressBar.style.width = '50%';
        
        // Scroll to top
        window.scrollTo({ top: 0, behavior: 'smooth' });
    });

    // Real-time validation feedback
    document.querySelectorAll('input, select').forEach(field => {
        field.addEventListener('blur', function() {
            if (this.hasAttribute('required') && !this.value.trim()) {
                this.classList.add('border-red-500');
            } else {
                this.classList.remove('border-red-500');
            }
        });

        field.addEventListener('input', function() {
            this.classList.remove('border-red-500');
        });
    });
});
</script>
{% endblock content %}