{% extends "admin/base.html" %}

{% block title %}订单详情 - 太白购物商城管理后台{% endblock %}

{% block page_title %}订单详情{% endblock %}
{% block page_description %}订单号：{{ order.order_sn }}{% endblock %}

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

{% block content %}
<div class="admin-order-detail">
    <div class="row">
        <!-- 左侧：订单信息 -->
        <div class="col-md-8">
            <!-- 订单基本信息 -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">订单基本信息</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <table class="table table-sm">
                                <tr>
                                    <th width="120">订单号：</th>
                                    <td>{{ order.order_sn }}</td>
                                </tr>
                                <tr>
                                    <th>用户信息：</th>
                                    <td>
                                        <div>{{ order.user.username }}</div>
                                        {% if order.user.phone %}
                                        <small class="text-muted">{{ order.user.phone }}</small>
                                        {% endif %}
                                    </td>
                                </tr>
                                <tr>
                                    <th>订单状态：</th>
                                    <td>
                                        <span class="badge order-status-{{ order.status }}">{{ order.get_status_text() }}</span>
                                    </td>
                                </tr>
                                <tr>
                                    <th>支付方式：</th>
                                    <td>
                                        {% if order.payment_method %}
                                        <span class="badge bg-info">{{ order.payment_method }}</span>
                                        {% else %}
                                        <span class="text-muted">未设置</span>
                                        {% endif %}
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <table class="table table-sm">
                                <tr>
                                    <th width="120">创建时间：</th>
                                    <td>{{ order.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</td>
                                </tr>
                                {% if order.shipped_at %}
                                <tr>
                                    <th>发货时间：</th>
                                    <td>{{ order.shipped_at.strftime('%Y-%m-%d %H:%M:%S') }}</td>
                                </tr>
                                {% endif %}
                                {% if order.received_at %}
                                <tr>
                                    <th>收货时间：</th>
                                    <td>{{ order.received_at.strftime('%Y-%m-%d %H:%M:%S') }}</td>
                                </tr>
                                {% endif %}
                                <tr>
                                    <th>配送方式：</th>
                                    <td>{{ order.shipping_method or '标准配送' }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    
                    {% if order.remark %}
                    <div class="mt-3">
                        <strong>订单备注：</strong>
                        <p class="text-muted mb-0">{{ order.remark }}</p>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- 收货信息 -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">收货信息</h5>
                </div>
                <div class="card-body">
                    {% set receiver = order.get_receiver_info() %}
                    {% if receiver %}
                    <div class="row">
                        <div class="col-md-6">
                            <table class="table table-sm">
                                <tr>
                                    <th width="120">收货人：</th>
                                    <td>{{ receiver.receiver_name }}</td>
                                </tr>
                                <tr>
                                    <th>联系电话：</th>
                                    <td>{{ receiver.receiver_phone }}</td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <table class="table table-sm">
                                <tr>
                                    <th width="120">收货地址：</th>
                                    <td>{{ receiver.full_address }}</td>
                                </tr>
                                {% if receiver.postal_code %}
                                <tr>
                                    <th>邮政编码：</th>
                                    <td>{{ receiver.postal_code }}</td>
                                </tr>
                                {% endif %}
                            </table>
                        </div>
                    </div>
                    {% else %}
                    <p class="text-muted">暂无收货信息</p>
                    {% endif %}
                </div>
            </div>

            <!-- 订单商品 -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">订单商品</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>商品信息</th>
                                    <th>单价</th>
                                    <th>数量</th>
                                    <th>小计</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for item in order.order_items %}
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            {% if item.product_image %}
                                            <img src="{{ item.product_image }}" alt="{{ item.product_name }}" 
                                                 class="product-thumb me-3" style="width: 60px; height: 60px; object-fit: cover;">
                                            {% endif %}
                                            <div>
                                                <div class="fw-bold">{{ item.product_name }}</div>
                                                {% if item.spec_combination %}
                                                <small class="text-muted">{{ item.spec_combination }}</small>
                                                {% endif %}
                                                {% if item.sku_code %}
                                                <small class="text-muted d-block">SKU: {{ item.sku_code }}</small>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </td>
                                    <td>¥{{ "%.2f"|format(item.price) }}</td>
                                    <td>{{ item.quantity }}</td>
                                    <td>¥{{ "%.2f"|format(item.total_price) }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧：金额信息和操作 -->
        <div class="col-md-4">
            <!-- 金额信息 -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">金额信息</h5>
                </div>
                <div class="card-body">
                    <table class="table table-sm">
                        <tr>
                            <th>商品总额：</th>
                            <td class="text-end">¥{{ "%.2f"|format(order.total_amount) }}</td>
                        </tr>
                        <tr>
                            <th>运费：</th>
                            <td class="text-end">¥{{ "%.2f"|format(order.shipping_fee) }}</td>
                        </tr>
                        <tr class="table-active">
                            <th>实付金额：</th>
                            <td class="text-end fw-bold text-primary">¥{{ "%.2f"|format(order.actual_amount) }}</td>
                        </tr>
                    </table>
                </div>
            </div>

            <!-- 支付信息 -->
            {% if payment %}
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">支付信息</h5>
                </div>
                <div class="card-body">
                    <table class="table table-sm">
                        <tr>
                            <th>支付流水号：</th>
                            <td>{{ payment.payment_sn }}</td>
                        </tr>
                        <tr>
                            <th>支付状态：</th>
                            <td>
                                <span class="badge {% if payment.status == 2 %}bg-success{% elif payment.status == 1 %}bg-warning{% else %}bg-danger{% endif %}">
                                    {{ payment.get_status_text() }}
                                </span>
                            </td>
                        </tr>
                        {% if payment.paid_at %}
                        <tr>
                            <th>支付时间：</th>
                            <td>{{ payment.paid_at.strftime('%Y-%m-%d %H:%M:%S') }}</td>
                        </tr>
                        {% endif %}
                        {% if payment.third_party_sn %}
                        <tr>
                            <th>第三方流水号：</th>
                            <td>{{ payment.third_party_sn }}</td>
                        </tr>
                        {% endif %}
                    </table>
                </div>
            </div>
            {% endif %}

            <!-- 物流信息 -->
            {% if shipping_info %}
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">物流信息</h5>
                </div>
                <div class="card-body">
                    <table class="table table-sm">
                        <tr>
                            <th>物流公司：</th>
                            <td>{{ shipping_info.shipping_company }}</td>
                        </tr>
                        <tr>
                            <th>快递单号：</th>
                            <td>{{ shipping_info.tracking_number }}</td>
                        </tr>
                        <tr>
                            <th>物流状态：</th>
                            <td>
                                <span class="badge {% if shipping_info.shipping_status == 3 %}bg-success{% elif shipping_info.shipping_status == 2 %}bg-warning{% else %}bg-info{% endif %}">
                                    {% if shipping_info.shipping_status == 1 %}已发货
                                    {% elif shipping_info.shipping_status == 2 %}运输中
                                    {% elif shipping_info.shipping_status == 3 %}已送达
                                    {% endif %}
                                </span>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            {% endif %}

            <!-- 操作按钮 -->
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">订单操作</h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        {% if order.status == 2 %}
                        <button class="btn btn-success" onclick="showShipModal({{ order.id }}, '{{ order.order_sn }}')">
                            <i class="bi bi-truck"></i> 发货
                        </button>
                        {% endif %}
                        
                        {% if order.status in [2, 3] %}
                        <button class="btn btn-warning" onclick="showRefundModal({{ order.id }}, '{{ order.order_sn }}')">
                            <i class="bi bi-arrow-return-left"></i> 退款
                        </button>
                        {% endif %}
                        
                        {% if order.can_cancel() %}
                        <button class="btn btn-danger" onclick="showCancelModal({{ order.id }}, '{{ order.order_sn }}')">
                            <i class="bi bi-x-circle"></i> 取消订单
                        </button>
                        {% endif %}
                        
                        <a href="{{ url_for('admin.orders') }}" class="btn btn-outline-secondary">
                            <i class="bi bi-arrow-left"></i> 返回列表
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 发货模态框 -->
<div class="modal fade" id="shipModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">订单发货</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="shipForm">
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">订单号</label>
                        <input type="text" class="form-control" id="shipOrderSn" readonly>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">物流公司 <span class="text-danger">*</span></label>
                        <select class="form-select" name="shipping_company" required>
                            <option value="">请选择物流公司</option>
                            <option value="顺丰速运">顺丰速运</option>
                            <option value="圆通速递">圆通速递</option>
                            <option value="中通快递">中通快递</option>
                            <option value="申通快递">申通快递</option>
                            <option value="韵达速递">韵达速递</option>
                            <option value="百世快递">百世快递</option>
                            <option value="德邦快递">德邦快递</option>
                            <option value="京东物流">京东物流</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">快递单号 <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="tracking_number" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-success">
                        <i class="bi bi-truck"></i> 确认发货
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 退款模态框 -->
<div class="modal fade" id="refundModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">订单退款</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="refundForm">
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">订单号</label>
                        <input type="text" class="form-control" id="refundOrderSn" readonly>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">退款原因 <span class="text-danger">*</span></label>
                        <textarea class="form-control" name="refund_reason" rows="3" required placeholder="请输入退款原因"></textarea>
                    </div>
                    <div class="alert alert-warning">
                        <i class="bi bi-exclamation-triangle"></i>
                        退款后将自动恢复库存，减少销量统计
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-warning">
                        <i class="bi bi-arrow-return-left"></i> 确认退款
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 取消模态框 -->
<div class="modal fade" id="cancelModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">取消订单</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="cancelForm">
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">订单号</label>
                        <input type="text" class="form-control" id="cancelOrderSn" readonly>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">取消原因</label>
                        <textarea class="form-control" name="cancel_reason" rows="3" placeholder="请输入取消原因（可选）"></textarea>
                    </div>
                    <div class="alert alert-danger">
                        <i class="bi bi-exclamation-triangle"></i>
                        取消订单后将自动恢复库存，减少销量统计
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-danger">
                        <i class="bi bi-x-circle"></i> 确认取消
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

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