{% extends 'accounts/base.html' %}
{% load static %}

{% block title %}Register - Accounts{% endblock %}

{% block extra_head %}
<style>
.register-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 2rem 0;
}

.register-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    max-width: 600px;
    width: 100%;
}

.register-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2rem;
    text-align: center;
}

.register-body {
    padding: 2rem;
}

.form-floating {
    margin-bottom: 1rem;
}

.btn-register {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 10px;
    padding: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-register:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
}

.password-strength {
    margin-top: 0.5rem;
}

.strength-meter {
    height: 4px;
    border-radius: 2px;
    background: #e9ecef;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.strength-fill {
    height: 100%;
    transition: all 0.3s ease;
    width: 0%;
}

.strength-weak { background: #dc3545; }
.strength-fair { background: #fd7e14; }
.strength-good { background: #ffc107; }
.strength-strong { background: #28a745; }

.password-requirements {
    font-size: 0.8rem;
    color: #6c757d;
}

.requirement {
    display: flex;
    align-items: center;
    margin-bottom: 0.25rem;
}

.requirement i {
    width: 16px;
    margin-right: 0.5rem;
    font-size: 0.7rem;
}

.requirement.met {
    color: #28a745;
}

.requirement.unmet {
    color: #dc3545;
}

.social-register {
    display: flex;
    gap: 1rem;
    margin: 1.5rem 0;
}

.btn-social {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    border: 2px solid #e9ecef;
    background: white;
    transition: all 0.3s ease;
}

.btn-social:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.btn-google {
    color: #db4437;
    border-color: #db4437;
}

.btn-github {
    color: #333;
    border-color: #333;
}

.divider {
    text-align: center;
    margin: 1.5rem 0;
    position: relative;
}

.divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e9ecef;
}

.divider span {
    background: white;
    padding: 0 1rem;
    color: #6c757d;
    font-size: 0.9rem;
}

.terms-privacy {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 1rem;
    margin-top: 1rem;
    font-size: 0.9rem;
    color: #6c757d;
}

.register-footer {
    text-align: center;
    padding: 1rem 2rem 2rem;
    color: #6c757d;
    font-size: 0.9rem;
}

.register-footer a {
    color: #667eea;
    text-decoration: none;
}

.register-footer a:hover {
    text-decoration: underline;
}

.progress-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
    position: relative;
}

.progress-steps::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 0;
    right: 0;
    height: 2px;
    background: #e9ecef;
    z-index: 1;
}

.step {
    background: white;
    border: 3px solid #e9ecef;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.step.active {
    border-color: #667eea;
    background: #667eea;
    color: white;
}

.step.completed {
    border-color: #28a745;
    background: #28a745;
    color: white;
}

@media (max-width: 768px) {
    .register-container {
        padding: 1rem;
    }
    
    .register-card {
        margin: 0;
    }
    
    .social-register {
        flex-direction: column;
    }
    
    .progress-steps {
        margin-bottom: 1rem;
    }
}
</style>
{% endblock %}

{% block content %}
<div class="register-container">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="register-card">
                    <div class="register-header">
                        <h2 class="mb-0">
                            <i class="fas fa-user-plus me-2"></i>
                            Create Account
                        </h2>
                        <p class="mb-0 mt-2 opacity-75">Join us today and get started</p>
                    </div>
                    
                    <div class="register-body">
                        <!-- Registration Steps -->
                        <div class="progress-steps">
                            <div class="step active" id="step1">
                                1
                            </div>
                            <div class="step" id="step2">
                                2
                            </div>
                            <div class="step" id="step3">
                                3
                            </div>
                        </div>
                        
                        {% if messages %}
                            {% for message in messages %}
                                <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                                    {{ message }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                </div>
                            {% endfor %}
                        {% endif %}
                        
                        {% if form.non_field_errors %}
                            <div class="alert alert-danger">
                                {{ form.non_field_errors }}
                            </div>
                        {% endif %}
                        
                        <form method="post" id="registerForm">
                            {% csrf_token %}
                            
                            <!-- Step 1: Basic Information -->
                            <div class="step-content" id="stepContent1">
                                <h5 class="mb-3">Basic Information</h5>
                                
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-floating">
                                            <input type="text" class="form-control {% if form.first_name.errors %}is-invalid{% endif %}" 
                                                   id="id_first_name" name="first_name" placeholder="First name" 
                                                   value="{{ form.first_name.value|default:'' }}" required>
                                            <label for="id_first_name">First name</label>
                                            {% if form.first_name.errors %}
                                                <div class="invalid-feedback">
                                                    {{ form.first_name.errors.0 }}
                                                </div>
                                            {% endif %}
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-floating">
                                            <input type="text" class="form-control {% if form.last_name.errors %}is-invalid{% endif %}" 
                                                   id="id_last_name" name="last_name" placeholder="Last name" 
                                                   value="{{ form.last_name.value|default:'' }}" required>
                                            <label for="id_last_name">Last name</label>
                                            {% if form.last_name.errors %}
                                                <div class="invalid-feedback">
                                                    {{ form.last_name.errors.0 }}
                                                </div>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="form-floating">
                                    <input type="email" class="form-control {% if form.email.errors %}is-invalid{% endif %}" 
                                           id="id_email" name="email" placeholder="Email address" 
                                           value="{{ form.email.value|default:'' }}" required>
                                    <label for="id_email">Email address</label>
                                    <div class="form-text">We'll send a verification email to this address</div>
                                    {% if form.email.errors %}
                                        <div class="invalid-feedback">
                                            {{ form.email.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-floating">
                                            <select class="form-select" id="id_timezone" name="timezone">
                                                {% for tz in timezones %}
                                                    <option value="{{ tz.0 }}" {% if tz.0 == form.timezone.value %}selected{% endif %}>
                                                        {{ tz.1 }}
                                                    </option>
                                                {% endfor %}
                                            </select>
                                            <label for="id_timezone">Timezone</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-floating">
                                            <select class="form-select" id="id_language" name="language">
                                                {% for lang in languages %}
                                                    <option value="{{ lang.0 }}" {% if lang.0 == form.language.value %}selected{% endif %}>
                                                        {{ lang.1 }}
                                                    </option>
                                                {% endfor %}
                                            </select>
                                            <label for="id_language">Language</label>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="text-end">
                                    <button type="button" class="btn btn-primary" onclick="nextStep(2)">
                                        Next <i class="fas fa-arrow-right ms-1"></i>
                                    </button>
                                </div>
                            </div>
                            
                            <!-- Step 2: Security -->
                            <div class="step-content d-none" id="stepContent2">
                                <h5 class="mb-3">Security Settings</h5>
                                
                                <div class="form-floating">
                                    <input type="password" class="form-control {% if form.password1.errors %}is-invalid{% endif %}" 
                                           id="id_password1" name="password1" placeholder="Password" required>
                                    <label for="id_password1">Password</label>
                                    <div class="position-absolute" style="right: 15px; top: 50%; transform: translateY(-50%); cursor: pointer;" 
                                         onclick="togglePassword('id_password1', 'passwordToggle1')">
                                        <i class="fas fa-eye" id="passwordToggle1"></i>
                                    </div>
                                    {% if form.password1.errors %}
                                        <div class="invalid-feedback">
                                            {{ form.password1.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                                
                                <div class="password-strength">
                                    <div class="strength-meter">
                                        <div class="strength-fill" id="strengthFill"></div>
                                    </div>
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <span class="small text-muted">Password strength:</span>
                                        <span id="strengthText" class="small fw-bold">Weak</span>
                                    </div>
                                    <div class="password-requirements">
                                        <div class="requirement unmet" id="req-length">
                                            <i class="fas fa-times"></i>
                                            <span>At least 8 characters</span>
                                        </div>
                                        <div class="requirement unmet" id="req-uppercase">
                                            <i class="fas fa-times"></i>
                                            <span>One uppercase letter</span>
                                        </div>
                                        <div class="requirement unmet" id="req-lowercase">
                                            <i class="fas fa-times"></i>
                                            <span>One lowercase letter</span>
                                        </div>
                                        <div class="requirement unmet" id="req-number">
                                            <i class="fas fa-times"></i>
                                            <span>One number</span>
                                        </div>
                                        <div class="requirement unmet" id="req-special">
                                            <i class="fas fa-times"></i>
                                            <span>One special character</span>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="form-floating">
                                    <input type="password" class="form-control {% if form.password2.errors %}is-invalid{% endif %}" 
                                           id="id_password2" name="password2" placeholder="Confirm password" required>
                                    <label for="id_password2">Confirm password</label>
                                    <div class="position-absolute" style="right: 15px; top: 50%; transform: translateY(-50%); cursor: pointer;" 
                                         onclick="togglePassword('id_password2', 'passwordToggle2')">
                                        <i class="fas fa-eye" id="passwordToggle2"></i>
                                    </div>
                                    {% if form.password2.errors %}
                                        <div class="invalid-feedback">
                                            {{ form.password2.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                                
                                <div id="passwordMatch" class="form-text"></div>
                                
                                <div class="d-flex justify-content-between">
                                    <button type="button" class="btn btn-outline-secondary" onclick="prevStep(1)">
                                        <i class="fas fa-arrow-left me-1"></i> Previous
                                    </button>
                                    <button type="button" class="btn btn-primary" onclick="nextStep(3)">
                                        Next <i class="fas fa-arrow-right ms-1"></i>
                                    </button>
                                </div>
                            </div>
                            
                            <!-- Step 3: Preferences & Terms -->
                            <div class="step-content d-none" id="stepContent3">
                                <h5 class="mb-3">Preferences & Agreement</h5>
                                
                                <div class="row">
                                    <div class="col-md-6">
                                        <h6 class="text-primary mb-3">Notification Preferences</h6>
                                        <div class="form-check form-switch mb-2">
                                            <input class="form-check-input" type="checkbox" id="email_notifications" 
                                                   name="email_notifications" checked>
                                            <label class="form-check-label" for="email_notifications">
                                                Email notifications
                                            </label>
                                        </div>
                                        <div class="form-check form-switch mb-2">
                                            <input class="form-check-input" type="checkbox" id="security_alerts" 
                                                   name="security_alerts" checked>
                                            <label class="form-check-label" for="security_alerts">
                                                Security alerts
                                            </label>
                                        </div>
                                        <div class="form-check form-switch mb-3">
                                            <input class="form-check-input" type="checkbox" id="marketing_emails" 
                                                   name="marketing_emails">
                                            <label class="form-check-label" for="marketing_emails">
                                                Marketing emails
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <h6 class="text-primary mb-3">Privacy Settings</h6>
                                        <div class="form-floating">
                                            <select class="form-select" id="profile_visibility" name="profile_visibility">
                                                <option value="public">Public</option>
                                                <option value="users" selected>Registered users only</option>
                                                <option value="private">Private</option>
                                            </select>
                                            <label for="profile_visibility">Profile visibility</label>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="terms-privacy">
                                    <div class="form-check mb-3">
                                        <input class="form-check-input" type="checkbox" id="agree_terms" 
                                               name="agree_terms" required>
                                        <label class="form-check-label" for="agree_terms">
                                            I agree to the 
                                            <a href="{% url 'accounts:terms' %}" target="_blank">Terms of Service</a> 
                                            and 
                                            <a href="{% url 'accounts:privacy' %}" target="_blank">Privacy Policy</a>
                                        </label>
                                    </div>
                                    <div class="form-check mb-3">
                                        <input class="form-check-input" type="checkbox" id="age_verification" 
                                               name="age_verification" required>
                                        <label class="form-check-label" for="age_verification">
                                            I confirm that I am at least 13 years old
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="data_processing" 
                                               name="data_processing" required>
                                        <label class="form-check-label" for="data_processing">
                                            I consent to the processing of my personal data as described in the Privacy Policy
                                        </label>
                                    </div>
                                </div>
                                
                                <div class="d-flex justify-content-between">
                                    <button type="button" class="btn btn-outline-secondary" onclick="prevStep(2)">
                                        <i class="fas fa-arrow-left me-1"></i> Previous
                                    </button>
                                    <button type="submit" class="btn btn-register" id="registerButton">
                                        <span class="spinner-border spinner-border-sm me-2 d-none" id="registerSpinner"></span>
                                        <i class="fas fa-user-plus me-2"></i>
                                        Create Account
                                    </button>
                                </div>
                            </div>
                        </form>
                        
                        {% if social_auth_enabled %}
                        <div class="divider">
                            <span>or sign up with</span>
                        </div>
                        
                        <div class="social-register">
                            {% if google_auth_enabled %}
                            <a href="{% url 'social:begin' 'google-oauth2' %}" class="btn btn-social btn-google">
                                <i class="fab fa-google me-2"></i>
                                Google
                            </a>
                            {% endif %}
                            
                            {% if github_auth_enabled %}
                            <a href="{% url 'social:begin' 'github' %}" class="btn btn-social btn-github">
                                <i class="fab fa-github me-2"></i>
                                GitHub
                            </a>
                            {% endif %}
                        </div>
                        {% endif %}
                    </div>
                    
                    <div class="register-footer">
                        <p class="mb-2">
                            Already have an account? 
                            <a href="{% url 'accounts:login' %}">Sign in here</a>
                        </p>
                        <p class="mb-0">
                            <a href="{% url 'accounts:help' %}">Need help?</a> • 
                            <a href="{% url 'accounts:privacy' %}">Privacy Policy</a> • 
                            <a href="{% url 'accounts:terms' %}">Terms of Service</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Email Verification Modal -->
<div class="modal fade" id="emailVerificationModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title">
                    <i class="fas fa-envelope-check me-2"></i>
                    Account Created Successfully
                </h5>
            </div>
            <div class="modal-body text-center">
                <div class="mb-3">
                    <i class="fas fa-check-circle text-success" style="font-size: 4rem;"></i>
                </div>
                <h5 class="mb-3">Welcome to our platform!</h5>
                <p class="mb-3">
                    Your account has been created successfully. We've sent a verification email to:
                </p>
                <div class="alert alert-info">
                    <strong id="verificationEmail"></strong>
                </div>
                <p class="mb-3">
                    Please check your email and click the verification link to activate your account.
                </p>
                <div class="text-muted small">
                    <p class="mb-1">Didn't receive the email?</p>
                    <button type="button" class="btn btn-link btn-sm p-0" onclick="resendVerification()">
                        Resend verification email
                    </button>
                </div>
            </div>
            <div class="modal-footer">
                <a href="{% url 'accounts:login' %}" class="btn btn-primary">
                    <i class="fas fa-sign-in-alt me-1"></i>Go to Login
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
let currentStep = 1;

// Step navigation
function nextStep(step) {
    if (validateCurrentStep()) {
        showStep(step);
    }
}

function prevStep(step) {
    showStep(step);
}

function showStep(step) {
    // Hide all step contents
    document.querySelectorAll('.step-content').forEach(content => {
        content.classList.add('d-none');
    });
    
    // Show current step content
    document.getElementById(`stepContent${step}`).classList.remove('d-none');
    
    // Update step indicators
    document.querySelectorAll('.step').forEach((stepEl, index) => {
        stepEl.classList.remove('active', 'completed');
        if (index + 1 < step) {
            stepEl.classList.add('completed');
        } else if (index + 1 === step) {
            stepEl.classList.add('active');
        }
    });
    
    currentStep = step;
}

// Validate current step
function validateCurrentStep() {
    const stepContent = document.getElementById(`stepContent${currentStep}`);
    const requiredFields = stepContent.querySelectorAll('input[required], select[required]');
    let isValid = true;
    
    requiredFields.forEach(field => {
        if (!field.value.trim()) {
            field.classList.add('is-invalid');
            isValid = false;
        } else {
            field.classList.remove('is-invalid');
        }
    });
    
    // Additional validation for step 2 (passwords)
    if (currentStep === 2) {
        const password1 = document.getElementById('id_password1').value;
        const password2 = document.getElementById('id_password2').value;
        
        if (password1 !== password2) {
            document.getElementById('id_password2').classList.add('is-invalid');
            isValid = false;
        }
        
        if (!isPasswordStrong(password1)) {
            document.getElementById('id_password1').classList.add('is-invalid');
            isValid = false;
        }
    }
    
    // Additional validation for step 3 (terms)
    if (currentStep === 3) {
        const requiredCheckboxes = ['agree_terms', 'age_verification', 'data_processing'];
        requiredCheckboxes.forEach(id => {
            const checkbox = document.getElementById(id);
            if (!checkbox.checked) {
                checkbox.classList.add('is-invalid');
                isValid = false;
            } else {
                checkbox.classList.remove('is-invalid');
            }
        });
    }
    
    return isValid;
}

// Password strength checker
function checkPasswordStrength(password) {
    let score = 0;
    const requirements = {
        length: password.length >= 8,
        uppercase: /[A-Z]/.test(password),
        lowercase: /[a-z]/.test(password),
        number: /[0-9]/.test(password),
        special: /[^A-Za-z0-9]/.test(password)
    };
    
    // Update requirement indicators
    Object.keys(requirements).forEach(req => {
        const element = document.getElementById(`req-${req}`);
        if (requirements[req]) {
            element.classList.remove('unmet');
            element.classList.add('met');
            element.querySelector('i').className = 'fas fa-check';
            score++;
        } else {
            element.classList.remove('met');
            element.classList.add('unmet');
            element.querySelector('i').className = 'fas fa-times';
        }
    });
    
    // Update strength meter
    const strengthFill = document.getElementById('strengthFill');
    const strengthText = document.getElementById('strengthText');
    
    let strengthClass, strengthLabel;
    if (score < 2) {
        strengthClass = 'strength-weak';
        strengthLabel = 'Weak';
    } else if (score < 3) {
        strengthClass = 'strength-fair';
        strengthLabel = 'Fair';
    } else if (score < 5) {
        strengthClass = 'strength-good';
        strengthLabel = 'Good';
    } else {
        strengthClass = 'strength-strong';
        strengthLabel = 'Strong';
    }
    
    strengthFill.className = `strength-fill ${strengthClass}`;
    strengthFill.style.width = `${(score / 5) * 100}%`;
    strengthText.textContent = strengthLabel;
    strengthText.className = `small fw-bold text-${strengthClass.split('-')[1]}`;
    
    return score >= 4;
}

function isPasswordStrong(password) {
    return checkPasswordStrength(password);
}

// Password visibility toggle
function togglePassword(fieldId, toggleId) {
    const passwordField = document.getElementById(fieldId);
    const toggleIcon = document.getElementById(toggleId);
    
    if (passwordField.type === 'password') {
        passwordField.type = 'text';
        toggleIcon.classList.remove('fa-eye');
        toggleIcon.classList.add('fa-eye-slash');
    } else {
        passwordField.type = 'password';
        toggleIcon.classList.remove('fa-eye-slash');
        toggleIcon.classList.add('fa-eye');
    }
}

// Password match checker
function checkPasswordMatch() {
    const password1 = document.getElementById('id_password1').value;
    const password2 = document.getElementById('id_password2').value;
    const matchDiv = document.getElementById('passwordMatch');
    
    if (password2) {
        if (password1 === password2) {
            matchDiv.innerHTML = '<i class="fas fa-check text-success me-1"></i>Passwords match';
            matchDiv.className = 'form-text text-success';
            document.getElementById('id_password2').classList.remove('is-invalid');
        } else {
            matchDiv.innerHTML = '<i class="fas fa-times text-danger me-1"></i>Passwords do not match';
            matchDiv.className = 'form-text text-danger';
            document.getElementById('id_password2').classList.add('is-invalid');
        }
    } else {
        matchDiv.innerHTML = '';
    }
}

// Form submission
document.getElementById('registerForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    if (!validateCurrentStep()) {
        return;
    }
    
    const button = document.getElementById('registerButton');
    const spinner = document.getElementById('registerSpinner');
    const form = this;
    
    // Show loading state
    button.disabled = true;
    spinner.classList.remove('d-none');
    button.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Creating account...';
    
    // Submit form data
    const formData = new FormData(form);
    
    fetch(form.action || window.location.href, {
        method: 'POST',
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Show success modal
            document.getElementById('verificationEmail').textContent = data.email;
            new bootstrap.Modal(document.getElementById('emailVerificationModal')).show();
        } else {
            // Show error messages
            showErrors(data.errors || {});
        }
    })
    .catch(error => {
        showError('An error occurred. Please try again.');
    })
    .finally(() => {
        // Reset button state
        button.disabled = false;
        spinner.classList.add('d-none');
        button.innerHTML = '<i class="fas fa-user-plus me-2"></i>Create Account';
    });
});

// Show form errors
function showErrors(errors) {
    Object.keys(errors).forEach(field => {
        const fieldElement = document.getElementById(`id_${field}`);
        if (fieldElement) {
            fieldElement.classList.add('is-invalid');
            
            // Create or update error message
            let errorDiv = fieldElement.parentNode.querySelector('.invalid-feedback');
            if (!errorDiv) {
                errorDiv = document.createElement('div');
                errorDiv.className = 'invalid-feedback';
                fieldElement.parentNode.appendChild(errorDiv);
            }
            errorDiv.textContent = errors[field][0];
        }
    });
}

// Show general error
function showError(message) {
    const alertDiv = document.createElement('div');
    alertDiv.className = 'alert alert-danger alert-dismissible fade show';
    alertDiv.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    
    const form = document.getElementById('registerForm');
    form.insertBefore(alertDiv, form.firstChild);
}

// Resend verification email
function resendVerification() {
    const email = document.getElementById('verificationEmail').textContent;
    
    fetch('{% url "accounts:resend_verification" %}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
        },
        body: JSON.stringify({ email: email })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Verification email sent successfully!');
        } else {
            alert('Error sending verification email. Please try again.');
        }
    })
    .catch(error => {
        alert('Error sending verification email. Please try again.');
    });
}

// Event listeners
document.addEventListener('DOMContentLoaded', function() {
    // Auto-detect timezone
    const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
    const timezoneSelect = document.getElementById('id_timezone');
    for (let option of timezoneSelect.options) {
        if (option.value === timezone) {
            option.selected = true;
            break;
        }
    }
    
    // Password strength checking
    document.getElementById('id_password1').addEventListener('input', function() {
        checkPasswordStrength(this.value);
        checkPasswordMatch();
    });
    
    // Password match checking
    document.getElementById('id_password2').addEventListener('input', checkPasswordMatch);
    
    // Email validation
    document.getElementById('id_email').addEventListener('blur', function() {
        const email = this.value;
        if (email) {
            // Check if email is already registered
            fetch('{% url "accounts:check_email" %}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
                },
                body: JSON.stringify({ email: email })
            })
            .then(response => response.json())
            .then(data => {
                if (data.exists) {
                    this.classList.add('is-invalid');
                    let errorDiv = this.parentNode.querySelector('.invalid-feedback');
                    if (!errorDiv) {
                        errorDiv = document.createElement('div');
                        errorDiv.className = 'invalid-feedback';
                        this.parentNode.appendChild(errorDiv);
                    }
                    errorDiv.textContent = 'This email is already registered.';
                } else {
                    this.classList.remove('is-invalid');
                }
            });
        }
    });
    
    // Focus first field
    document.getElementById('id_first_name').focus();
});
</script>
{% endblock %}