{% extends "base.html" %}

{% block title %}个人中心 - 影院订票系统{% endblock %}

{% block content %}
<div class="fade-in">
    <div class="profile-header">
        <h1 class="page-title">
            <i class="fas fa-user-circle"></i>
            个人中心
        </h1>
        <p class="page-subtitle">管理您的账户信息和观影记录</p>
    </div>
    
    <div class="profile-container">
        <div class="profile-sidebar">
            <div class="profile-avatar">
                <div class="avatar-placeholder">
                    <i class="fas fa-user"></i>
                </div>
                <h3>{{ current_user }}</h3>
                <p class="user-phone">
                    <i class="fas fa-phone"></i>
                    {{ session.get('phone', '未设置') }}
                </p>
            </div>
            
            <div class="profile-menu">
                <a href="#info" class="menu-item active" onclick="showTab('info')">
                    <i class="fas fa-user"></i>
                    基本信息
                </a>
                <a href="#orders" class="menu-item" onclick="showTab('orders')">
                    <i class="fas fa-ticket-alt"></i>
                    我的订单
                </a>
                <a href="#settings" class="menu-item" onclick="showTab('settings')">
                    <i class="fas fa-cog"></i>
                    账户设置
                </a>
                <a href="/logout" class="menu-item logout">
                    <i class="fas fa-sign-out-alt"></i>
                    退出登录
                </a>
            </div>
        </div>
        
        <div class="profile-content">
            <!-- 基本信息标签页 -->
            <div id="info-tab" class="tab-content active">
                <h2 class="tab-title">基本信息</h2>
                
                <div class="info-grid">
                    <div class="info-item">
                        <label>用户名</label>
                        <div class="info-value">{{ current_user }}</div>
                    </div>
                    
                    <div class="info-item">
                        <label>手机号</label>
                        <div class="info-value">{{ session.get('phone', '未设置') }}</div>
                    </div>
                    
                    <div class="info-item">
                        <label>用户ID</label>
                        <div class="info-value">{{ session.get('user_id') }}</div>
                    </div>
                    
                    <div class="info-item">
                        <label>注册时间</label>
                        <div class="info-value">2025-01-01</div>
                    </div>
                    
                    <div class="info-item">
                        <label>观影次数</label>
                        <div class="info-value">12次</div>
                    </div>
                    
                    <div class="info-item">
                        <label>累计消费</label>
                        <div class="info-value">¥856.00</div>
                    </div>
                </div>
            </div>
            
            <!-- 订单标签页 -->
            <div id="orders-tab" class="tab-content">
                <h2 class="tab-title">最近订单</h2>
                
                <div class="recent-orders">
                    <p>查看完整的订单列表：</p>
                    <a href="/orders" class="btn">
                        <i class="fas fa-list"></i>
                        查看所有订单
                    </a>
                </div>
            </div>
            
            <!-- 设置标签页 -->
            <div id="settings-tab" class="tab-content">
                <h2 class="tab-title">账户设置</h2>
                
                <form class="settings-form">
                    <div class="form-group">
                        <label for="new_phone" class="form-label">修改手机号</label>
                        <input type="tel" id="new_phone" class="form-input" 
                               placeholder="请输入新手机号">
                    </div>
                    
                    <div class="form-group">
                        <label for="current_password" class="form-label">当前密码</label>
                        <input type="password" id="current_password" class="form-input" 
                               placeholder="请输入当前密码">
                    </div>
                    
                    <div class="form-group">
                        <label for="new_password" class="form-label">新密码</label>
                        <input type="password" id="new_password" class="form-input" 
                               placeholder="请输入新密码">
                    </div>
                    
                    <div class="form-group">
                        <label for="confirm_new_password" class="form-label">确认新密码</label>
                        <input type="password" id="confirm_new_password" class="form-input" 
                               placeholder="请再次输入新密码">
                    </div>
                    
                    <button type="button" class="btn" onclick="alert('修改功能开发中...')">
                        <i class="fas fa-save"></i>
                        保存修改
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<style>
.profile-container {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 30px;
    margin-top: 30px;
}

@media (max-width: 768px) {
    .profile-container {
        grid-template-columns: 1fr;
    }
}

.profile-sidebar {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.profile-avatar {
    text-align: center;
    margin-bottom: 30px;
}

.avatar-placeholder {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 3rem;
}

.profile-avatar h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: #333;
}

.user-phone {
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.95rem;
}

.profile-menu {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    color: #555;
    text-decoration: none;
    border-radius: 10px;
    transition: all 0.3s ease;
    font-weight: 500;
}

.menu-item:hover {
    background-color: #f5f5f5;
    color: #667eea;
}

.menu-item.active {
    background-color: #667eea;
    color: white;
}

.menu-item.logout {
    color: #f5576c;
    margin-top: 20px;
}

.profile-content {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.tab-title {
    font-size: 1.8rem;
    margin-bottom: 30px;
    color: #333;
    padding-bottom: 15px;
    border-bottom: 2px solid #f0f0f0;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.info-item {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
    border-left: 4px solid #667eea;
}

.info-item label {
    display: block;
    font-weight: 600;
    color: #555;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.info-value {
    font-size: 1.2rem;
    color: #333;
    font-weight: 500;
}

.recent-orders {
    text-align: center;
    padding: 60px 20px;
}

.recent-orders p {
    margin-bottom: 20px;
    color: #666;
    font-size: 1.1rem;
}

.settings-form {
    max-width: 500px;
}
</style>

<script>
function showTab(tabName) {
    // 更新菜单项状态
    document.querySelectorAll('.menu-item').forEach(item => {
        item.classList.remove('active');
    });
    
    event.target.classList.add('active');
    
    // 显示对应标签页
    document.querySelectorAll('.tab-content').forEach(tab => {
        tab.classList.remove('active');
    });
    
    document.getElementById(tabName + '-tab').classList.add('active');
}
</script>
{% endblock %}