{% extends "base.html" %}
{% block title %}评价商品 - 太白购物商城{% endblock %}

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

{% block content %}
<div class="container">
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ url_for('main.index') }}">首页</a></li>
            <li class="breadcrumb-item"><a href="{{ url_for('order.list') }}">我的订单</a></li>
            <li class="breadcrumb-item"><a href="{{ url_for('order.detail', order_id=order.id) }}">订单详情</a></li>
            <li class="breadcrumb-item active">评价商品</li>
        </ol>
    </nav>

    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h5><i class="bi bi-star"></i> 评价商品</h5>
                </div>
                <div class="card-body">
                    <!-- 商品信息 -->
                    <div class="product-info mb-4">
                        <div class="row align-items-center">
                            <div class="col-md-2">
                                <img src="{{ order_item.product_image or '/static/images/default-product.jpg' }}"
                                     class="img-fluid rounded" alt="{{ order_item.product_name }}">
                            </div>
                            <div class="col-md-10">
                                <h6 class="mb-1">{{ order_item.product_name }}</h6>
                                {% if order_item.spec_combination %}
                                <p class="text-muted mb-1">{{ order_item.spec_combination }}</p>
                                {% endif %}
                                <p class="text-muted mb-0">
                                    单价：¥{{ "%.2f"|format(order_item.price) }} × {{ order_item.quantity }}
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- 评价表单 -->
                    <form id="reviewForm">
                        <input type="hidden" id="orderId" value="{{ order.id }}">
                        <input type="hidden" id="productId" value="{{ order_item.product_id }}">

                        <!-- 评分 -->
                        <div class="mb-4">
                            <label class="form-label"><strong>商品评分：</strong></label>
                            <div class="rating-container">
                                <div class="star-rating" id="starRating">
                                    <span class="star" data-rating="1"></span>
                                    <span class="star" data-rating="2"></span>
                                    <span class="star" data-rating="3"></span>
                                    <span class="star" data-rating="4"></span>
                                    <span class="star" data-rating="5"></span>
                                </div>
                                <span class="rating-text" id="ratingText">请选择评分</span>
                            </div>
                            <input type="hidden" id="rating" name="rating" required>
                        </div>

                        <!-- 评价内容 -->
                        <div class="mb-4">
                            <label for="content" class="form-label"><strong>评价内容：</strong></label>
                            <textarea class="form-control" id="content" name="content" rows="5"
                                      placeholder="请分享您对商品的使用感受，帮助其他买家更好地了解商品..."></textarea>
                            <div class="form-text">字数限制：500字以内</div>
                        </div>

                        <!-- 图片上传 -->
                        <div class="mb-4">
                            <label class="form-label"><strong>上传图片：</strong>（可选）</label>
                            <div class="image-upload-container">
                                <div class="upload-area" id="uploadArea">
                                    <i class="bi bi-cloud-upload"></i>
                                    <p class="mb-0">点击或拖拽上传图片</p>
                                    <small class="text-muted">支持 JPG、PNG、GIF 格式，最大5MB</small>
                                </div>
                                <input type="file" id="imageInput" multiple accept="image/*" style="display: none;">
                                <div class="uploaded-images" id="uploadedImages"></div>
                            </div>
                        </div>

                        <!-- 匿名评价 -->
                        <div class="mb-4">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="isAnonymous" name="is_anonymous">
                                <label class="form-check-label" for="isAnonymous">
                                    匿名评价（其他用户将看不到您的用户名）
                                </label>
                            </div>
                        </div>

                        <!-- 提交按钮 -->
                        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                            <a href="{{ url_for('order.detail', order_id=order.id) }}" 
                               class="btn btn-outline-secondary me-md-2">取消</a>
                            <button type="submit" class="btn btn-primary" id="submitBtn">
                                <i class="bi bi-check-circle"></i> 提交评价
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

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