{% extends "base.html" %}

{% block title %}我的订单 - 影院订票系统{% endblock %}

{% block content %}
<div class="fade-in">
    <div class="orders-header">
        <h1 class="page-title">
            <i class="fas fa-ticket-alt"></i>
            我的订单
        </h1>
        <p class="page-subtitle">您的所有观影订单记录</p>
    </div>

    {% if orders %}
        <div class="orders-container">
            {% for order in orders %}
                <div class="order-card">
                    <div class="order-header">
                        <div class="order-id">
                            订单号: #{{ order.order_id }}
                        </div>
                        <div class="order-status {{ order.status }}">
                            {% if order.status == 'pending' %}
                                待支付
                            {% elif order.status == 'paid' %}
                                已支付
                            {% elif order.status == 'cancelled' %}
                                已取消
                            {% else %}
                                {{ order.status }}
                            {% endif %}
                        </div>
                    </div>
                    
                    <div class="order-body">
                        {% if order.poster_url %}
                            <img src="{{ order.poster_url }}" alt="{{ order.movie_title }}" 
                                 class="order-poster"
                                 onerror="this.src='https://via.placeholder.com/100x150?text=No+Image'">
                        {% else %}
                            <div class="order-poster placeholder">
                                <i class="fas fa-film"></i>
                            </div>
                        {% endif %}
                        
                        <div class="order-details">
                            <h3 class="order-title">{{ order.movie_title }}</h3>
                            
                            <div class="order-meta">
                                <div class="meta-item">
                                    <i class="far fa-calendar"></i>
                                    <span>{{ order.start_time.strftime('%Y-%m-%d %H:%M') }}</span>
                                </div>
                                
                                <div class="meta-item">
                                    <i class="fas fa-map-marker-alt"></i>
                                    <span>{{ order.hall_name }}</span>
                                </div>
                                
                                <div class="meta-item">
                                    <i class="fas fa-chair"></i>
                                    <span>{{ order.seat_count }}个座位</span>
                                    {% if order.seat_info %}
                                        <span class="seat-details">({{ order.seat_info }})</span>
                                    {% endif %}
                                </div>
                                
                                <div class="meta-item">
                                    <i class="far fa-clock"></i>
                                    <span>下单时间: {{ order.order_time.strftime('%Y-%m-%d %H:%M') }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="order-footer">
                        <div class="order-price">
                            ¥{{ order.total_price }}
                        </div>
                        
                        <div class="order-actions">
                            {% if order.status == 'pending' %}
                                <button class="btn btn-secondary btn-sm" onclick="payOrder('{{ order.order_id }}')">
                                    <i class="fas fa-credit-card"></i>
                                    立即支付
                                </button>
                                <button class="btn btn-outline btn-sm" onclick="cancelOrder('{{ order.order_id }}')">
                                    <i class="fas fa-times"></i>
                                    取消订单
                                </button>
                            {% endif %}
                            
                            {% if order.status == 'paid' %}
                                <button class="btn btn-outline btn-sm" onclick="showTicket('{{ order.order_id }}')">
                                    <i class="fas fa-qrcode"></i>
                                    查看电子票
                                </button>
                            {% endif %}
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <div class="empty-orders">
            <i class="fas fa-shopping-basket" style="font-size: 4rem; color: #ccc; margin-bottom: 20px;"></i>
            <h3>暂无订单</h3>
            <p>您还没有任何订单记录</p>
            <a href="/" class="btn mt-20">
                <i class="fas fa-film"></i>
                去选电影
            </a>
        </div>
    {% endif %}
</div>

<style>
.orders-header {
    text-align: center;
    margin-bottom: 40px;
}

.page-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
}

.page-subtitle {
    color: #666;
    font-size: 1.1rem;
}

.order-poster.placeholder {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
}

.order-actions {
    display: flex;
    gap: 10px;
}

.btn-sm {
    padding: 8px 16px;
    font-size: 0.9rem;
}

.seat-details {
    font-size: 0.9rem;
    color: #666;
    margin-left: 5px;
}

.empty-orders {
    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>

<script>
async function payOrder(orderId) {
    if (!confirm('确认支付该订单吗？')) {
        return;
    }
    
    try {
        const response = await fetch(`/api/order/${orderId}/pay`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            }
        });
        
        const data = await response.json();
        
        if (data.success) {
            alert('支付成功！');
            location.reload();
        } else {
            alert('支付失败: ' + data.error);
        }
    } catch (error) {
        console.error('支付失败:', error);
        alert('网络错误，请稍后重试');
    }
}

async function cancelOrder(orderId) {
    if (!confirm('确认取消该订单吗？取消后不可恢复。')) {
        return;
    }
    
    try {
        const response = await fetch(`/api/order/${orderId}/cancel`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            }
        });
        
        const data = await response.json();
        
        if (data.success) {
            alert('订单已取消');
            location.reload();
        } else {
            alert('取消失败: ' + data.error);
        }
    } catch (error) {
        console.error('取消失败:', error);
        alert('网络错误，请稍后重试');
    }
}

function showTicket(orderId) {
    // 这里可以跳转到电子票页面或显示弹窗
    alert('电子票功能开发中...');
}
</script>
{% endblock %}