{% extends 'inventory/base.html' %}

{% block title %}销售详情 - {{ block.super }}{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3">
                    <div>
                        <h2 class="card-title mb-0">销售单详情</h2>
                        <p class="text-muted mb-md-0">查看销售单的详细信息</p>
                    </div>
                    <div class="d-flex flex-wrap gap-2">
                        <a href="{% url 'sale_list' %}" class="btn btn-secondary">
                            <i class="bi bi-arrow-left me-1"></i> 返回列表
                        </a>
                        <button class="btn btn-outline-primary print-button">
                            <i class="bi bi-printer me-1"></i> 打印
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- 销售单信息 -->
    <div class="col-lg-4 mb-4">
        <div class="card h-100 shadow-sm">
            <div class="card-header bg-primary text-white">
                <h4 class="card-title mb-0">销售单信息</h4>
            </div>
            <div class="card-body">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item d-flex justify-content-between">
                        <span class="text-muted">订单编号:</span>
                        <span class="fw-bold">#{{ sale.id }}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between">
                        <span class="text-muted">销售日期:</span>
                        <span>{{ sale.created_at|date:"Y-m-d H:i" }}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between">
                        <span class="text-muted">操作员:</span>
                        <span>{{ sale.operator.username }}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between">
                        <span class="text-muted">客户:</span>
                        <span>
                            {% if sale.member %}
                            <span class="badge bg-info text-dark">{{ sale.member.name }}</span>
                            {% else %}
                            <span class="text-muted">散客</span>
                            {% endif %}
                        </span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between">
                        <span class="text-muted">状态:</span>
                        <span class="badge bg-success">已完成</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 支付信息 -->
    <div class="col-lg-4 mb-4">
        <div class="card h-100 shadow-sm">
            <div class="card-header bg-success text-white">
                <h4 class="card-title mb-0">支付信息</h4>
            </div>
            <div class="card-body">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item d-flex justify-content-between">
                        <span class="text-muted">总金额:</span>
                        <span class="fs-5 fw-bold text-success">¥{{ sale.total_amount|floatformat:2 }}</span>
                    </li>
                    {% if sale.discount_amount %}
                    <li class="list-group-item d-flex justify-content-between">
                        <span class="text-muted">优惠金额:</span>
                        <span class="text-danger">-¥{{ sale.discount_amount|floatformat:2 }}</span>
                    </li>
                    {% endif %}
                    <li class="list-group-item d-flex justify-content-between">
                        <span class="text-muted">实付金额:</span>
                        <span class="fs-5 fw-bold text-success">¥{{ sale.final_amount|floatformat:2 }}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between">
                        <span class="text-muted">支付方式:</span>
                        <span>
                            {% if sale.payment_method == 'cash' %}
                            <span class="badge bg-success">现金支付</span>
                            {% elif sale.payment_method == 'wechat' %}
                            <span class="badge bg-success">微信支付</span>
                            {% elif sale.payment_method == 'alipay' %}
                            <span class="badge bg-success">支付宝</span>
                            {% elif sale.payment_method == 'card' %}
                            <span class="badge bg-success">刷卡</span>
                            {% else %}
                            <span class="badge bg-secondary">其他</span>
                            {% endif %}
                        </span>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 会员信息 -->
    <div class="col-lg-4 mb-4">
        <div class="card h-100 shadow-sm">
            <div class="card-header bg-info text-white">
                <h4 class="card-title mb-0">{% if sale.member %}会员信息{% else %}其他信息{% endif %}</h4>
            </div>
            <div class="card-body">
                {% if sale.member %}
                <ul class="list-group list-group-flush">
                    <li class="list-group-item d-flex justify-content-between">
                        <span class="text-muted">会员姓名:</span>
                        <span>{{ sale.member.name }}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between">
                        <span class="text-muted">会员等级:</span>
                        <span class="badge" style="background-color: #{{ sale.member.level.color }}">{{ sale.member.level.name }}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between">
                        <span class="text-muted">联系电话:</span>
                        <span>{{ sale.member.phone }}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between">
                        <span class="text-muted">积分增加:</span>
                        <span>+{{ sale.final_amount|floatformat:0 }}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between">
                        <a href="{% url 'member_detail' pk=sale.member.id %}" class="btn btn-sm btn-outline-info mt-2">
                            <i class="bi bi-person-badge me-1"></i> 查看会员详情
                        </a>
                    </li>
                </ul>
                {% else %}
                <div class="text-center py-4">
                    <i class="bi bi-person-x text-muted" style="font-size: 2rem;"></i>
                    <p class="mt-3 text-muted">此销售单未关联会员</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- 商品明细 -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card shadow-sm">
            <div class="card-header bg-primary text-white">
                <h4 class="card-title mb-0">商品明细</h4>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped align-middle">
                        <thead>
                            <tr>
                                <th>商品信息</th>
                                <th>单价</th>
                                <th>实际售价</th>
                                <th>数量</th>
                                <th>小计</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in items %}
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        {% if item.product.image %}
                                        <img src="{{ item.product.image.url }}" alt="{{ item.product.name }}" class="me-3" style="width: 50px; height: 50px; object-fit: contain;">
                                        {% else %}
                                        <div class="bg-light rounded me-3 d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
                                            <i class="bi bi-box text-muted"></i>
                                        </div>
                                        {% endif %}
                                        <div>
                                            <h6 class="mb-0">{{ item.product.name }}</h6>
                                            <small class="text-muted">{{ item.product.barcode }}</small>
                                            {% if item.product.specification %}
                                            <br><small class="text-muted">规格: {{ item.product.specification }}</small>
                                            {% endif %}
                                        </div>
                                    </div>
                                </td>
                                <td>¥{{ item.price|floatformat:2 }}</td>
                                <td>
                                    {% if item.price != item.actual_price %}
                                    <span class="text-danger">¥{{ item.actual_price|floatformat:2 }}</span>
                                    {% else %}
                                    ¥{{ item.actual_price|floatformat:2 }}
                                    {% endif %}
                                </td>
                                <td>{{ item.quantity }}</td>
                                <td class="fw-bold">¥{{ item.subtotal|floatformat:2 }}</td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="5" class="text-center py-4">
                                    <div class="d-flex flex-column align-items-center">
                                        <i class="bi bi-cart-x text-muted" style="font-size: 2rem;"></i>
                                        <p class="mt-2 mb-0">暂无商品明细</p>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="4" class="text-end fw-bold">总计:</td>
                                <td class="fw-bold fs-5 text-success">¥{{ sale.total_amount|floatformat:2 }}</td>
                            </tr>
                            {% if sale.discount_amount %}
                            <tr>
                                <td colspan="4" class="text-end fw-bold">优惠:</td>
                                <td class="fw-bold text-danger">-¥{{ sale.discount_amount|floatformat:2 }}</td>
                            </tr>
                            <tr>
                                <td colspan="4" class="text-end fw-bold">实付金额:</td>
                                <td class="fw-bold fs-5 text-success">¥{{ sale.final_amount|floatformat:2 }}</td>
                            </tr>
                            {% endif %}
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 备注信息 -->
{% if sale.notes %}
<div class="row mb-4">
    <div class="col-12">
        <div class="card shadow-sm">
            <div class="card-header bg-secondary text-white">
                <h4 class="card-title mb-0">备注信息</h4>
            </div>
            <div class="card-body">
                <p class="mb-0">{{ sale.notes }}</p>
            </div>
        </div>
    </div>
</div>
{% endif %}

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 打印功能
        const printButton = document.querySelector('.print-button');
        if (printButton) {
            printButton.addEventListener('click', function() {
                window.print();
            });
        }
    });
</script>

<style>
    @media print {
        .btn, nav, footer, .no-print {
            display: none !important;
        }
        
        body {
            background-color: white !important;
        }
        
        .card {
            box-shadow: none !important;
            border: 1px solid #ddd !important;
        }
        
        .card-header {
            background-color: #f8f9fa !important;
            color: #212529 !important;
            border-bottom: 1px solid #ddd !important;
        }
    }
</style>
{% endblock %}