<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>车主信息查询系统 - 注册</title>
    <!-- 引入Layui CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/layui.css') }}">
    <!-- 引入Font Awesome -->
    <link href="{{ url_for('static', filename='css/font-awesome.min.css') }}" rel="stylesheet">
    <!-- 引入自定义CSS -->
    <link href="{{ url_for('static', filename='css/custom.css') }}" rel="stylesheet">
    
    <!-- 引入Layui JS -->
    <script src="{{ url_for('static', filename='layui.js') }}"></script>
</head>
<body>
    <!-- 引入统一的顶部导航栏 -->
    {% include 'header.html' %}
    
    <!-- 主要内容区域 -->
    <div class="content-container">
        <div class="content-wrapper">
            <div class="card">
                <div class="card-header">
                    <i class="fa fa-user-plus"></i> 用户注册
                </div>
                <div class="card-body">
                    <!-- 消息提示区域 -->
                    {% if error %}
                    <div class="layui-bg-red message-box">
                        <i class="fa fa-exclamation-circle"></i> {{ error }}
                    </div>
                    {% endif %}
                    {% if success %}
                    <div class="layui-bg-green message-box">
                        <i class="fa fa-check-circle"></i> {{ success }}
                    </div>
                    {% endif %}
                    
                    <div class="layui-text" style="text-align: center; margin-bottom: 20px;">
                        <div style="width: 80px; height: 80px; background-color: #f2f2f2; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 15px;">
                            <i class="fa fa-user-plus" style="font-size: 40px; color: #009688;"></i>
                        </div>
                        <p style="color: #666;">请填写以下信息完成注册</p>
                    </div>

                    <!-- 表单 -->
                    <form class="layui-form" id="registerForm" method="POST" style="max-width: 500px; margin: 0 auto;">
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-block">
                                <input type="text" id="username" name="username" required lay-verify="required|username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">姓名</label>
                            <div class="layui-input-block">
                                <input type="text" id="name" name="name" required lay-verify="required" placeholder="请输入真实姓名" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">联系电话</label>
                            <div class="layui-input-block">
                                <input type="tel" id="phone" name="phone" required lay-verify="required|phone" placeholder="请输入联系电话" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">部门名称</label>
                            <div class="layui-input-block">
                                <input type="text" id="department" name="department" required lay-verify="required" placeholder="请输入部门名称" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">密码</label>
                            <div class="layui-input-block">
                                <input type="password" id="password" name="password" required lay-verify="required|password" placeholder="请设置密码" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">确认密码</label>
                            <div class="layui-input-block">
                                <input type="password" id="confirm_password" name="confirm_password" required lay-verify="required|confirmPassword" placeholder="请再次输入密码" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="submit" class="layui-btn" lay-submit lay-filter="registerForm"><i class="fa fa-check"></i> 注册</button>
                                <button type="reset" class="layui-btn layui-btn-primary"><i class="fa fa-refresh"></i> 重置</button>
                            </div>
                        </div>
                        <div class="layui-form-item" style="text-align: center;">
                            <a href="{{ url_for('user.login') }}" class="layui-link">已有账号？返回登录</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 页脚 -->
    {% include 'footer.html' %}

    <script>
    layui.use(['form', 'layer'], function(){
        var form = layui.form;
        var layer = layui.layer;
        
        // 表单验证
        form.verify({
            username: function(value){
                if(value.length < 3){
                    return '用户名至少3个字符';
                }
            },
            phone: [
                /^1\d{10}$/,
                '请输入正确的手机号'
            ],
            password: [
                /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/,
                '密码长度至少8位，且必须包含字母和数字'
            ],
            confirmPassword: function(value){
                var password = document.getElementById('password').value;
                if(value !== password){
                    return '两次输入的密码不一致';
                }
            }
        });
        
        // 表单提交
        form.on('submit(registerForm)', function(data){
            // 添加加载状态
            var submitButton = document.querySelector('button[type="submit"]');
            var originalText = submitButton.innerHTML;
            
            submitButton.disabled = true;
            submitButton.innerHTML = '<i class="fa fa-spinner fa-spin mr-1"></i> 提交中...';
            
            // 延迟提交以显示加载状态
            setTimeout(function(){
                document.getElementById('registerForm').submit();
            }, 500);
            
            return false;
        });
        
        // 密码可见性切换功能
        function togglePasswordVisibility(inputId) {
            var input = document.getElementById(inputId);
            var icon = document.getElementById(inputId + '_icon');
            
            if (input.type === 'password') {
                input.type = 'text';
                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');
            } else {
                input.type = 'password';
                icon.classList.remove('fa-eye-slash');
                icon.classList.add('fa-eye');
            }
        }
        
        // 为输入框添加密码可见性切换图标
        function addPasswordToggleIcons() {
            var passwordInputs = document.querySelectorAll('input[type="password"]');
            passwordInputs.forEach(function(input) {
                var parent = input.parentElement;
                var toggleBtn = document.createElement('i');
                toggleBtn.id = input.id + '_icon';
                toggleBtn.className = 'fa fa-eye layui-icon layui-input-icon-right password-toggle-icon';
                toggleBtn.style.position = 'absolute';
                toggleBtn.style.right = '10px';
                toggleBtn.style.top = '50%';
                toggleBtn.style.transform = 'translateY(-50%)';
                toggleBtn.style.cursor = 'pointer';
                toggleBtn.style.color = '#999';
                
                // 为容器添加相对定位
                parent.style.position = 'relative';
                
                // 添加点击事件
                toggleBtn.addEventListener('click', function() {
                    togglePasswordVisibility(input.id);
                });
                
                // 检查是否已存在图标
                if (!document.getElementById(input.id + '_icon')) {
                    parent.appendChild(toggleBtn);
                    // 为输入框添加右侧内边距，防止文字被图标遮挡
                    input.style.paddingRight = '30px';
                }
            });
        }
        
        // 页面加载完成后执行
        window.onload = function() {
            // 添加密码可见性切换图标
            addPasswordToggleIcons();
            
            // 重新渲染表单
            form.render();
        };
    });
    </script>
</body>
</html>