{% extends "base.html" %}

{% block title %}购物车 - 太白购物商城{% endblock %}

{% block head %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/cart.css') }}">
{% endblock %}

{% block content %}
<div class="container">
    <!-- 面包屑导航 -->
    <nav aria-label="breadcrumb" class="mb-3">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ url_for('main.index') }}">首页</a></li>
            <li class="breadcrumb-item active">购物车</li>
        </ol>
    </nav>

    <div class="row">
        <div class="col-12">
            <h3><i class="bi bi-cart"></i> 我的购物车</h3>
            <hr>
        </div>
    </div>

    {% if cart_items %}
    <div class="row">
        <!-- 购物车商品列表 -->
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <div class="row align-items-center">
                        <div class="col-1">
                            <input type="checkbox" class="form-check-input" id="selectAll">
                        </div>
                        <div class="col-5">商品信息</div>
                        <div class="col-2 text-center">单价</div>
                        <div class="col-2 text-center">数量</div>
                        <div class="col-2 text-center">操作</div>
                    </div>
                </div>
                <div class="card-body p-0">
                    {% for item in cart_items %}
                    <div class="cart-item border-bottom p-3" data-cart-id="{{ item.id }}">
                        <div class="row align-items-center">
                            <!-- 选择框 -->
                            <div class="col-1">
                                <input type="checkbox" class="form-check-input item-checkbox"
                                       value="{{ item.id }}" {% if item.is_available() %}{% else %}disabled{% endif %}>
                            </div>

                            <!-- 商品信息 -->
                            <div class="col-5">
                                <div class="d-flex">
                                    <a href="{{ url_for('main.product_detail', product_id=item.product_id) }}"
                                       class="text-decoration-none">
                                        {% if item.product.main_image %}
                                            <img src="{{ item.product.main_image }}" alt="{{ item.product.name }}"
                                                 class="me-3" style="width: 80px; height: 80px; object-fit: cover;">
                                        {% else %}
                                            <div class="bg-light me-3 d-flex align-items-center justify-content-center"
                                                 style="width: 80px; height: 80px;">
                                                <i class="bi bi-image text-muted"></i>
                                            </div>
                                        {% endif %}
                                    </a>
                                    <div class="flex-grow-1">
                                        <h6 class="mb-1">
                                            <a href="{{ url_for('main.product_detail', product_id=item.product_id) }}"
                                               class="text-decoration-none text-dark">
                                                {{ item.product.name }}
                                            </a>
                                        </h6>
                                        {% if item.product.brand %}
                                            <small class="text-muted">品牌：{{ item.product.brand }}</small><br>
                                        {% endif %}
                                        {% if item.spec_combination %}
                                            <small class="text-muted">规格：{{ item.spec_combination }}</small><br>
                                        {% endif %}
                                        <small class="text-muted">库存：{{ item.get_stock() }}件</small>

                                        {% if not item.is_available() %}
                                            <div class="mt-1">
                                                {% if item.product.status != 1 %}
                                                    <span class="badge bg-danger">商品已下架</span>
                                                {% elif item.get_stock() < item.quantity %}
                                                    <span class="badge bg-warning">库存不足</span>
                                                {% endif %}
                                            </div>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>

                            <!-- 单价 -->
                            <div class="col-2 text-center">
                                <span class="fw-bold text-danger">¥{{ "%.2f"|format(item.get_price()) }}</span>
                            </div>

                            <!-- 数量 -->
                            <div class="col-2 text-center">
                                <div class="input-group" style="width: 100px; margin: 0 auto;">
                                    <button class="btn btn-outline-secondary btn-sm" type="button"
                                            onclick="changeQuantity({{ item.id }}, -1)"
                                            {% if not item.is_available() or item.quantity <= 1 %}disabled{% endif %}>-</button>
                                    <input type="number" class="form-control form-control-sm text-center quantity-input"
                                           value="{{ item.quantity }}" min="1" max="{{ item.get_stock() }}"
                                           data-cart-id="{{ item.id }}" onchange="updateQuantity({{ item.id }}, this.value)"
                                           {% if not item.is_available() %}disabled{% endif %}>
                                    <button class="btn btn-outline-secondary btn-sm" type="button"
                                            onclick="changeQuantity({{ item.id }}, 1)"
                                            {% if not item.is_available() or item.quantity >= item.get_stock() %}disabled{% endif %}>+</button>
                                </div>
                                <div class="mt-1">
                                    <small class="text-muted">小计：¥<span class="item-total">{{ "%.2f"|format(item.get_total_price()) }}</span></small>
                                </div>
                            </div>

                            <!-- 操作 -->
                            <div class="col-2 text-center">
                                <button type="button" class="btn btn-outline-danger btn-sm"
                                        onclick="removeItem({{ item.id }})">
                                    <i class="bi bi-trash"></i> 删除
                                </button>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>

        <!-- 购物车操作栏 -->
        <div class="col-md-4">
            <div class="card position-sticky" style="top: 20px;">
                <div class="card-header">
                    <h6 class="mb-0"><i class="bi bi-calculator"></i> 结算信息</h6>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between mb-2">
                        <span>已选商品：</span>
                        <span id="selectedCount">0</span>件
                    </div>
                    <div class="d-flex justify-content-between mb-3">
                        <span>商品总价：</span>
                        <span class="text-danger fw-bold h5">¥<span id="selectedTotal">0.00</span></span>
                    </div>
                    <hr>
                    <div class="d-flex justify-content-between mb-3">
                        <span class="fw-bold">应付总额：</span>
                        <span class="text-danger fw-bold h4">¥<span id="finalTotal">0.00</span></span>
                    </div>

                    <div class="d-grid gap-2">
                        <button type="button" class="btn btn-danger btn-lg" id="checkoutBtn"
                                onclick="checkout()" disabled>
                            <i class="bi bi-credit-card"></i> 去结算
                        </button>
                        <button type="button" class="btn btn-outline-secondary" onclick="clearCart()">
                            <i class="bi bi-trash"></i> 清空购物车
                        </button>
                    </div>

                    <div class="mt-3">
                        <small class="text-muted">
                            <i class="bi bi-shield-check"></i> 7天无理由退换<br>
                            <i class="bi bi-truck"></i> 全国包邮<br>
                            <i class="bi bi-award"></i> 正品保证
                        </small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% else %}
    <!-- 空购物车 -->
    <div class="text-center py-5">
        <i class="bi bi-cart-x text-muted" style="font-size: 5rem;"></i>
        <h4 class="text-muted mt-3">购物车是空的</h4>
        <p class="text-muted">快去选购您喜欢的商品吧！</p>
        <a href="{{ url_for('main.product_list') }}" class="btn btn-primary btn-lg">
            <i class="bi bi-shop"></i> 去购物
        </a>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/cart.js') }}"></script>
{% endblock %}