{% extends "base.html" %}

{% block title %}注册 - 影院订票系统{% endblock %}

{% block content %}
<div class="form-container fade-in">
    <h2 class="form-title">
        <i class="fas fa-user-plus"></i>
        用户注册
    </h2>
    
    <form method="POST" action="/register" onsubmit="return validateForm()">
        <div class="form-group">
            <label for="username" class="form-label">
                <i class="fas fa-user"></i>
                用户名
            </label>
            <input type="text" id="username" name="username" class="form-input" 
                   placeholder="请输入用户名（4-20位字符）" required minlength="4" maxlength="20">
            <small class="form-hint">用户名只能包含字母、数字和下划线</small>
        </div>
        
        <div class="form-group">
            <label for="phone" class="form-label">
                <i class="fas fa-phone"></i>
                手机号
            </label>
            <input type="tel" id="phone" name="phone" class="form-input" 
                   placeholder="请输入11位手机号" required pattern="1[0-9]{10}">
            <small class="form-hint">请输入正确的手机号码</small>
        </div>
        
        <div class="form-group">
            <label for="password" class="form-label">
                <i class="fas fa-lock"></i>
                密码
            </label>
            <input type="password" id="password" name="password" class="form-input" 
                   placeholder="请输入密码（至少6位）" required minlength="6">
            <small class="form-hint">密码至少6位，建议包含字母和数字</small>
        </div>
        
        <div class="form-group">
            <label for="confirm_password" class="form-label">
                <i class="fas fa-lock"></i>
                确认密码
            </label>
            <input type="password" id="confirm_password" name="confirm_password" 
                   class="form-input" placeholder="请再次输入密码" required>
            <small class="form-hint">请再次输入密码以确认</small>
        </div>
        
        <div class="form-group">
            <label class="checkbox-label">
                <input type="checkbox" id="agree_terms" required>
                我已阅读并同意
                <a href="#" onclick="alert('服务条款页面')">《用户协议》</a>
                和
                <a href="#" onclick="alert('隐私政策页面')">《隐私政策》</a>
            </label>
        </div>
        
        <button type="submit" class="btn" style="width: 100%;">
            <i class="fas fa-user-plus"></i>
            注册
        </button>
    </form>
    
    <div class="form-text">
        已有账号？
        <a href="/login" class="form-link">立即登录</a>
    </div>
</div>

<style>
.form-hint {
    display: block;
    margin-top: 5px;
    color: #888;
    font-size: 0.85rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #555;
    font-size: 0.95rem;
}

.checkbox-label a {
    color: #667eea;
    text-decoration: none;
}

.checkbox-label a:hover {
    text-decoration: underline;
}
</style>

<script>
function validateForm() {
    const username = document.getElementById('username').value;
    const phone = document.getElementById('phone').value;
    const password = document.getElementById('password').value;
    const confirmPassword = document.getElementById('confirm_password').value;
    const agreeTerms = document.getElementById('agree_terms').checked;
    
    // 验证用户名格式
    const usernameRegex = /^[a-zA-Z0-9_]{4,20}$/;
    if (!usernameRegex.test(username)) {
        alert('用户名只能包含字母、数字和下划线，长度4-20位');
        return false;
    }
    
    // 验证手机号格式
    const phoneRegex = /^1[0-9]{10}$/;
    if (!phoneRegex.test(phone)) {
        alert('请输入正确的11位手机号码');
        return false;
    }
    
    // 验证密码长度
    if (password.length < 6) {
        alert('密码长度至少6位');
        return false;
    }
    
    // 验证两次密码是否一致
    if (password !== confirmPassword) {
        alert('两次输入的密码不一致');
        return false;
    }
    
    // 验证是否同意条款
    if (!agreeTerms) {
        alert('请阅读并同意用户协议和隐私政策');
        return false;
    }
    
    return true;
}
</script>
{% endblock %}