<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" th:replace="~{layout :: layout(~{::title}, ~{::content})}">
<head>
    <title>订单详情</title>
</head>
<body>
    <div th:fragment="content">
        <!-- Breadcrumb -->
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a th:href="@{/}">首页</a></li>
                <li class="breadcrumb-item"><a th:href="@{/orders}">订单管理</a></li>
                <li class="breadcrumb-item active" th:text="${order.orderNumber}">订单详情</li>
            </ol>
        </nav>
        
        <!-- Order Details -->
        <div class="row">
            <div class="col-lg-8">
                <!-- Order Info Card -->
                <div class="card mb-4">
                    <div class="card-header">
                        <div class="row align-items-center">
                            <div class="col">
                                <h5 class="mb-0">
                                    <i class="fas fa-shopping-cart me-2"></i>订单信息
                                </h5>
                            </div>
                            <div class="col-auto">
                                <span th:if="${order.status.name() == 'PENDING'}" class="badge bg-warning fs-6" th:text="${order.status.displayName}">待支付</span>
                                <span th:if="${order.status.name() == 'CONFIRMED'}" class="badge bg-info fs-6" th:text="${order.status.displayName}">已确认</span>
                                <span th:if="${order.status.name() == 'PAID'}" class="badge bg-primary fs-6" th:text="${order.status.displayName}">已支付</span>
                                <span th:if="${order.status.name() == 'PROCESSING'}" class="badge bg-secondary fs-6" th:text="${order.status.displayName}">处理中</span>
                                <span th:if="${order.status.name() == 'SHIPPED'}" class="badge bg-success fs-6" th:text="${order.status.displayName}">已发货</span>
                                <span th:if="${order.status.name() == 'DELIVERED'}" class="badge bg-success fs-6" th:text="${order.status.displayName}">已送达</span>
                                <span th:if="${order.status.name() == 'COMPLETED'}" class="badge bg-success fs-6" th:text="${order.status.displayName}">已完成</span>
                                <span th:if="${order.status.name() == 'CANCELLED'}" class="badge bg-danger fs-6" th:text="${order.status.displayName}">已取消</span>
                                <span th:if="${order.status.name() == 'REFUNDED'}" class="badge bg-secondary fs-6" th:text="${order.status.displayName}">已退款</span>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <table class="table table-sm table-borderless">
                                    <tr>
                                        <td class="fw-bold">订单号：</td>
                                        <td th:text="${order.orderNumber}">ORD123456789</td>
                                    </tr>
                                    <tr>
                                        <td class="fw-bold">订单类型：</td>
                                        <td th:text="${order.orderType.displayName}">商品订单</td>
                                    </tr>
                                    <tr>
                                        <td class="fw-bold">创建时间：</td>
                                        <td th:text="${#temporals.format(order.createdAt, 'yyyy-MM-dd HH:mm:ss')}">2024-01-01 10:00:00</td>
                                    </tr>
                                    <tr th:if="${order.paidAt}">
                                        <td class="fw-bold">支付时间：</td>
                                        <td th:text="${#temporals.format(order.paidAt, 'yyyy-MM-dd HH:mm:ss')}">2024-01-01 10:30:00</td>
                                    </tr>
                                    <tr th:if="${order.shippedAt}">
                                        <td class="fw-bold">发货时间：</td>
                                        <td th:text="${#temporals.format(order.shippedAt, 'yyyy-MM-dd HH:mm:ss')}">2024-01-02 09:00:00</td>
                                    </tr>
                                    <tr th:if="${order.deliveredAt}">
                                        <td class="fw-bold">送达时间：</td>
                                        <td th:text="${#temporals.format(order.deliveredAt, 'yyyy-MM-dd HH:mm:ss')}">2024-01-03 14:00:00</td>
                                    </tr>
                                </table>
                            </div>
                            <div class="col-md-6">
                                <table class="table table-sm table-borderless">
                                    <tr>
                                        <td class="fw-bold">订单金额：</td>
                                        <td class="fs-5 text-primary">
                                            <span th:text="${order.currency}">CNY</span>
                                            <span th:text="${order.totalAmount}">0.00</span>
                                        </td>
                                    </tr>
                                    <tr th:if="${order.description}">
                                        <td class="fw-bold">订单描述：</td>
                                        <td th:text="${order.description}">订单描述</td>
                                    </tr>
                                    <tr th:if="${order.contactEmail}">
                                        <td class="fw-bold">联系邮箱：</td>
                                        <td th:text="${order.contactEmail}">user@example.com</td>
                                    </tr>
                                    <tr th:if="${order.contactPhone}">
                                        <td class="fw-bold">联系电话：</td>
                                        <td th:text="${order.contactPhone}">13800138000</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        
                        <!-- Order Notes -->
                        <div th:if="${order.notes}" class="mt-3">
                            <h6 class="fw-bold">订单备注：</h6>
                            <div class="bg-light p-3 rounded">
                                <pre th:text="${order.notes}" class="mb-0">订单备注内容</pre>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Order Items -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-list me-2"></i>订单商品
                        </h5>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover mb-0">
                                <thead>
                                    <tr>
                                        <th>商品名称</th>
                                        <th width="100">单价</th>
                                        <th width="80">数量</th>
                                        <th width="100">小计</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr th:each="item : ${order.orderItems}">
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div th:if="${item.productImage}" class="me-3">
                                                    <img th:src="${item.productImage}" class="img-thumbnail" 
                                                         style="width: 50px; height: 50px; object-fit: cover;">
                                                </div>
                                                <div>
                                                    <div class="fw-bold" th:text="${item.productName}">商品名称</div>
                                                    <div th:if="${item.productDescription}" class="text-muted small" 
                                                         th:text="${item.productDescription}">商品描述</div>
                                                    <div th:if="${item.productSku}" class="text-muted small">
                                                        SKU: <span th:text="${item.productSku}">SKU123</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <span th:text="${order.currency}">CNY</span>
                                            <span th:text="${item.unitPrice}">0.00</span>
                                        </td>
                                        <td th:text="${item.quantity}">1</td>
                                        <td>
                                            <span th:text="${order.currency}">CNY</span>
                                            <span th:text="${item.subtotal}">0.00</span>
                                        </td>
                                    </tr>
                                </tbody>
                                <tfoot>
                                    <tr class="table-active">
                                        <th colspan="3" class="text-end">订单总计：</th>
                                        <th class="text-primary">
                                            <span th:text="${order.currency}">CNY</span>
                                            <span th:text="${order.totalAmount}">0.00</span>
                                        </th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
                
                <!-- Address Information -->
                <div class="card mb-4" th:if="${order.shippingAddress or order.billingAddress}">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-map-marker-alt me-2"></i>地址信息
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6" th:if="${order.shippingAddress}">
                                <h6 class="fw-bold">收货地址：</h6>
                                <div class="bg-light p-3 rounded">
                                    <pre th:text="${order.shippingAddress}" class="mb-0">收货地址</pre>
                                </div>
                            </div>
                            <div class="col-md-6" th:if="${order.billingAddress}">
                                <h6 class="fw-bold">账单地址：</h6>
                                <div class="bg-light p-3 rounded">
                                    <pre th:text="${order.billingAddress}" class="mb-0">账单地址</pre>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Sidebar -->
            <div class="col-lg-4">
                <!-- Order Actions -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-cogs me-2"></i>订单操作
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="d-grid gap-2">
                            <!-- Pay Button -->
                            <div th:if="${order.canPay()}" class="btn-group" role="group">
                                <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown">
                                    <i class="fas fa-credit-card me-2"></i>立即支付
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" th:href="@{|/orders/${order.id}/pay?paymentMethod=ALIPAY|}">
                                        <i class="fab fa-alipay me-2"></i>支付宝支付
                                    </a></li>
                                    <li><a class="dropdown-item" th:href="@{|/orders/${order.id}/pay?paymentMethod=PAYPAL|}">
                                        <i class="fab fa-paypal me-2"></i>PayPal支付
                                    </a></li>
                                </ul>
                            </div>
                            
                            <!-- Cancel Button -->
                            <button th:if="${order.canCancel()}" type="button" class="btn btn-danger" 
                                    th:onclick="'cancelOrder(' + ${order.id} + ')'">
                                <i class="fas fa-times me-2"></i>取消订单
                            </button>
                            
                            <!-- Admin Actions -->
                            <div sec:authorize="hasRole('ADMIN')" class="mt-3">
                                <hr>
                                <h6 class="fw-bold">管理员操作</h6>
                                
                                <!-- Ship Button -->
                                <button th:if="${order.canShip()}" type="button" class="btn btn-info mb-2" 
                                        th:onclick="'shipOrder(' + ${order.id} + ')'">
                                    <i class="fas fa-truck me-2"></i>发货
                                </button>
                                
                                <!-- Complete Button -->
                                <button th:if="${order.canComplete()}" type="button" class="btn btn-success mb-2" 
                                        th:onclick="'completeOrder(' + ${order.id} + ')'">
                                    <i class="fas fa-check me-2"></i>完成订单
                                </button>
                                
                                <!-- Status Update -->
                                <div class="mt-3">
                                    <label class="form-label">更新状态</label>
                                    <div class="input-group">
                                        <select class="form-select" id="statusSelect">
                                            <option th:each="status : ${orderStatuses}" 
                                                    th:value="${status.name()}" 
                                                    th:text="${status.displayName}"
                                                    th:selected="${status == order.status}"></option>
                                        </select>
                                        <button class="btn btn-outline-primary" type="button" 
                                                th:onclick="'updateStatus(' + ${order.id} + ')'">
                                            <i class="fas fa-save"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Payment History -->
                <div class="card" th:if="${order.payments != null and !order.payments.empty}">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-history me-2"></i>支付记录
                        </h5>
                    </div>
                    <div class="card-body">
                        <div th:each="payment : ${order.payments}" class="border-bottom pb-2 mb-2">
                            <div class="d-flex justify-content-between">
                                <span th:text="${payment.paymentMethod.displayName}">支付宝</span>
                                <span th:if="${payment.status.name() == 'SUCCESS'}" class="badge bg-success" th:text="${payment.status.displayName}">成功</span>
                                <span th:if="${payment.status.name() == 'PENDING'}" class="badge bg-warning" th:text="${payment.status.displayName}">待支付</span>
                                <span th:if="${payment.status.name() == 'FAILED'}" class="badge bg-danger" th:text="${payment.status.displayName}">失败</span>
                            </div>
                            <div class="small text-muted">
                                <span th:text="${payment.currency}">CNY</span>
                                <span th:text="${payment.amount}">0.00</span>
                                <span th:text="${#temporals.format(payment.createdAt, 'MM-dd HH:mm')}">01-01 10:00</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Cancel Order Modal -->
        <div class="modal fade" id="cancelOrderModal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">
                            <i class="fas fa-exclamation-triangle me-2"></i>取消订单
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <form id="cancelOrderForm">
                        <div class="modal-body">
                            <p>确定要取消此订单吗？此操作不可撤销。</p>
                            <div class="mb-3">
                                <label for="cancelReason" class="form-label">取消原因（可选）</label>
                                <textarea class="form-control" id="cancelReason" rows="3" 
                                          placeholder="请输入取消原因..."></textarea>
                            </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">确认取消</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
        <!-- Ship Order Modal -->
        <div class="modal fade" id="shipOrderModal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">
                            <i class="fas fa-truck me-2"></i>订单发货
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <form id="shipOrderForm">
                        <div class="modal-body">
                            <div class="mb-3">
                                <label for="trackingNumber" class="form-label">物流单号（可选）</label>
                                <input type="text" class="form-control" id="trackingNumber" 
                                       placeholder="请输入物流单号...">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                            <button type="submit" class="btn btn-info">确认发货</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        let currentOrderId = null;
        
        // Cancel order
        function cancelOrder(orderId) {
            currentOrderId = orderId;
            const modal = new bootstrap.Modal(document.getElementById('cancelOrderModal'));
            modal.show();
        }
        
        // Ship order
        function shipOrder(orderId) {
            currentOrderId = orderId;
            const modal = new bootstrap.Modal(document.getElementById('shipOrderModal'));
            modal.show();
        }
        
        // Complete order
        function completeOrder(orderId) {
            if (confirm('确定要完成此订单吗？')) {
                fetch(`/orders/${orderId}/complete`, {
                    method: 'POST'
                })
                .then(response => {
                    if (response.ok) {
                        location.reload();
                    } else {
                        alert('完成订单失败');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('完成订单失败');
                });
            }
        }
        
        // Update status
        function updateStatus(orderId) {
            const status = document.getElementById('statusSelect').value;
            const notes = prompt('请输入备注（可选）：');
            
            const formData = new FormData();
            formData.append('status', status);
            if (notes) {
                formData.append('notes', notes);
            }
            
            fetch(`/orders/${orderId}/status`, {
                method: 'POST',
                body: formData
            })
            .then(response => {
                if (response.ok) {
                    location.reload();
                } else {
                    alert('更新状态失败');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('更新状态失败');
            });
        }
        
        // Cancel order form submission
        document.getElementById('cancelOrderForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            if (!currentOrderId) return;
            
            const reason = document.getElementById('cancelReason').value;
            const formData = new FormData();
            if (reason) {
                formData.append('reason', reason);
            }
            
            fetch(`/orders/${currentOrderId}/cancel`, {
                method: 'POST',
                body: formData
            })
            .then(response => {
                if (response.ok) {
                    location.reload();
                } else {
                    alert('取消订单失败');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('取消订单失败');
            });
        });
        
        // Ship order form submission
        document.getElementById('shipOrderForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            if (!currentOrderId) return;
            
            const trackingNumber = document.getElementById('trackingNumber').value;
            const formData = new FormData();
            if (trackingNumber) {
                formData.append('trackingNumber', trackingNumber);
            }
            
            fetch(`/orders/${currentOrderId}/ship`, {
                method: 'POST',
                body: formData
            })
            .then(response => {
                if (response.ok) {
                    location.reload();
                } else {
                    alert('发货失败');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('发货失败');
            });
        });
    </script>
</body>
</html>





































