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

{% block title %}报价单预览 - {{ quotation.quotation_no }}{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="fas fa-file-invoice me-2"></i>报价单预览</h2>
    <div>
        <a href="{% url 'generate_pdf' quotation.id %}" class="btn btn-danger me-2">
            <i class="fas fa-file-pdf me-1"></i>导出PDF
        </a>
        <a href="{% url 'order_builder' %}" class="btn btn-secondary">
            <i class="fas fa-arrow-left me-1"></i>返回
        </a>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <!-- 报价单头部 -->
        <div class="row mb-4">
            <div class="col-md-6">
                {% if company %}
                <h4>{{ company.name }}</h4>
                <p class="text-muted mb-1">{{ company.address }}</p>
                <p class="text-muted mb-1">电话: {{ company.phone }}</p>
                <p class="text-muted mb-1">邮箱: {{ company.email }}</p>
                {% if company.website %}
                <p class="text-muted">网站: {{ company.website }}</p>
                {% endif %}
                {% endif %}
            </div>
            <div class="col-md-6 text-end">
                <h3 class="text-primary">报价单</h3>
                <p class="mb-1"><strong>单号:</strong> {{ quotation.quotation_no }}</p>
                <p class="mb-1"><strong>日期:</strong> {{ quotation.created_at|date:"Y年m月d日" }}</p>
                <p class="mb-1"><strong>状态:</strong> 
                    <span class="badge bg-{% if quotation.status == 'approved' %}success{% elif quotation.status == 'pending' %}warning{% else %}secondary{% endif %}">
                        {{ quotation.get_status_display }}
                    </span>
                </p>
            </div>
        </div>

        <hr>

        <!-- 客户信息 -->
        <div class="row mb-4">
            <div class="col-md-6">
                <h5>客户信息</h5>
                <p><strong>{{ quotation.customer.name }}</strong></p>
                <p class="text-muted mb-1">联系人: {{ quotation.customer.contact_person }}</p>
                <p class="text-muted mb-1">电话: {{ quotation.customer.phone }}</p>
                {% if quotation.customer.email %}
                <p class="text-muted mb-1">邮箱: {{ quotation.customer.email }}</p>
                {% endif %}
                {% if quotation.customer.address %}
                <p class="text-muted">地址: {{ quotation.customer.address }}</p>
                {% endif %}
            </div>
            <div class="col-md-6">
                <h5>报价信息</h5>
                <p class="mb-1"><strong>标题:</strong> {{ quotation.title }}</p>
                <p class="mb-1"><strong>有效期:</strong> {{ quotation.valid_days }} 天</p>
                <p class="mb-1"><strong>创建人:</strong> {{ quotation.created_by.username }}</p>
            </div>
        </div>

        <!-- 产品明细 -->
        <div class="mb-4">
            <h5>报价明细</h5>
            <div class="table-responsive">
                <table class="table table-bordered">
                    <thead class="table-light">
                        <tr>
                            <th>序号</th>
                            <th>产品名称</th>
                            <th>规格型号</th>
                            <th>单位</th>
                            <th>数量</th>
                            <th>单价(元)</th>
                            <th>折扣率(%)</th>
                            <th>小计(元)</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in quotation.items.all %}
                        <tr>
                            <td>{{ forloop.counter }}</td>
                            <td>{{ item.product.name }}</td>
                            <td>{{ item.product.brand }} {{ item.product.model }}</td>
                            <td>{{ item.product.unit }}</td>
                            <td>{{ item.quantity }}</td>
                            <td>¥{{ item.unit_price }}</td>
                            <td>{{ item.discount_rate }}%</td>
                            <td>¥{{ item.subtotal }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="7" class="text-end"><strong>合计金额:</strong></td>
                            <td><strong>¥{{ quotation.total_amount }}</strong></td>
                        </tr>
                        {% if quotation.discount_rate > 0 %}
                        <tr>
                            <td colspan="7" class="text-end"><strong>整体折扣({{ quotation.discount_rate }}%):</strong></td>
                            <td><strong>-¥{{ quotation.total_amount|floatformat:2 }}</strong></td>
                        </tr>
                        {% endif %}
                        {% if quotation.tax_rate > 0 %}
                        <tr>
                            <td colspan="7" class="text-end"><strong>税费({{ quotation.tax_rate }}%):</strong></td>
                            <td><strong>+¥{{ quotation.total_amount|floatformat:2 }}</strong></td>
                        </tr>
                        {% endif %}
                        <tr class="table-primary">
                            <td colspan="7" class="text-end"><strong>最终金额:</strong></td>
                            <td><strong>¥{{ quotation.total_amount|floatformat:2 }}</strong></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>

        <!-- 备注信息 -->
        {% if quotation.remark %}
        <div class="mb-4">
            <h5>备注</h5>
            <div class="border rounded p-3 bg-light">
                {{ quotation.remark|linebreaks }}
            </div>
        </div>
        {% endif %}

        <!-- 条款说明 -->
        <div class="border-top pt-3">
            <h6>条款与说明</h6>
            <ol class="small text-muted">
                <li>本报价单有效期至 {{ quotation.created_at|date:"Y年m月d日" }} 起 {{ quotation.valid_days }} 天内有效</li>
                <li>价格包含税费和标准包装费用</li>
                <li>付款方式: 银行转账或现金支付</li>
                <li>交货期: 确认订单后 3-5 个工作日</li>
                <li>质量保证: 所有产品提供一年质保</li>
            </ol>
        </div>

        <!-- 签章区域 -->
        <div class="row mt-4">
            <div class="col-md-6">
                <p class="mb-1">客户确认:</p>
                <p class="text-muted">签字: ___________________</p>
                <p class="text-muted">日期: ___________________</p>
            </div>
            <div class="col-md-6 text-end">
                <p class="mb-1">公司盖章:</p>
                <p class="text-muted">签字: ___________________</p>
                <p class="text-muted">日期: ___________________</p>
            </div>
        </div>
    </div>
</div>

<div class="text-center mt-3">
    <a href="{% url 'generate_pdf' quotation.id %}" class="btn btn-primary me-2">
        <i class="fas fa-download me-1"></i>下载PDF
    </a>
    <a href="/admin/portal/quotation/{{ quotation.id }}/change/" class="btn btn-outline-secondary me-2">
        <i class="fas fa-edit me-1"></i>编辑报价单
    </a>
    <a href="{% url 'order_builder' %}" class="btn btn-outline-primary">
        <i class="fas fa-plus me-1"></i>新建报价单
    </a>
</div>
{% endblock %}