{% extends "base.html" %}

{% block title %}选择座位 - 影院订票系统{% endblock %}

{% block content %}
<div class="fade-in">
    {% if showtime %}
        <div class="seat-page-header">
            <h1 class="page-title">
                <i class="fas fa-chair"></i>
                选择座位
            </h1>
            
            <div class="showtime-info-card">
                <div class="info-left">
                    <h3>{{ showtime.title }}</h3>
                    <div class="info-details">
                        <div class="info-item">
                            <i class="far fa-calendar"></i>
                            <span>{{ showtime.start_time.strftime('%Y年%m月%d日 %H:%M') }}</span>
                        </div>
                        <div class="info-item">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>{{ showtime.hall_name }}</span>
                        </div>
                        <div class="info-item">
                            <i class="fas fa-tag"></i>
                            <span>¥{{ showtime.price }} / 座</span>
                        </div>
                    </div>
                </div>
                
                <div class="info-right">
                    <div class="hall-stats">
                        <div class="stat-item">
                            <div class="stat-number">{{ showtime.row_count }}</div>
                            <div class="stat-label">总排数</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-number">{{ showtime.col_count }}</div>
                            <div class="stat-label">总列数</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-number">{{ showtime.row_count * showtime.col_count }}</div>
                            <div class="stat-label">总座位</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 座位图容器 -->
        <div id="seat-container">
            <!-- 座位图将通过JavaScript动态生成 -->
        </div>
        
        <!-- 注意事项 -->
        <div class="seat-notice">
            <h3><i class="fas fa-info-circle"></i> 购票须知</h3>
            <ul>
                <li>请根据屏幕方向选择座位，灰色座位为已售座位</li>
                <li>选择座位后请尽快完成支付，座位将保留15分钟</li>
                <li>如需退票，请在开场前1小时联系客服</li>
                <li>儿童观影需购买全票，请勿携带外食</li>
            </ul>
        </div>
    {% else %}
        <div class="error-state">
            <i class="fas fa-exclamation-triangle" style="font-size: 4rem; color: #f5576c; margin-bottom: 20px;"></i>
            <h3>场次不存在</h3>
            <p>您要查看的场次可能已被取消或不存在</p>
            <a href="/" class="btn mt-20">
                <i class="fas fa-home"></i>
                返回首页
            </a>
        </div>
    {% endif %}
</div>

<style>
.seat-page-header {
    margin-bottom: 40px;
}

.showtime-info-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 25px 30px;
    border-radius: 15px;
    margin-top: 20px;
    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
}

@media (max-width: 768px) {
    .showtime-info-card {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }
}

.info-left h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    font-weight: 600;
}

.info-details {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    opacity: 0.9;
}

.hall-stats {
    display: flex;
    gap: 30px;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.stat-label {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-top: 5px;
}

.seat-notice {
    background: white;
    border-radius: 10px;
    padding: 25px;
    margin-top: 40px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-left: 4px solid #667eea;
}

.seat-notice h3 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 10px;
}

.seat-notice ul {
    list-style: none;
    padding-left: 0;
}

.seat-notice li {
    padding: 8px 0;
    color: #555;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.seat-notice li::before {
    content: '•';
    color: #667eea;
    font-weight: bold;
    font-size: 1.2rem;
}

.error-state {
    text-align: center;
    padding: 60px 20px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    margin: 40px auto;
    max-width: 500px;
}
</style>

{% block scripts %}
<script src="/static/js/seat.js"></script>
{% endblock %}
{% endblock %}