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

{% block title %}报价管理 - 后台管理{% endblock %}

{% block extra_css %}
<style>
.customer-info-card .card-header {
    background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
}

.product-selection-card .card-header {
    background: linear-gradient(135deg, #28a745, #20c997) !important;
}

.quotation-details-card .card-header {
    background: linear-gradient(135deg, #17a2b8, #20c997) !important;
}

.quotation-settings-card .card-header {
    background: linear-gradient(135deg, #ffc107, #fd7e14) !important;
}

.quotation-summary {
    border: 2px solid #e9ecef;
    background: linear-gradient(135deg, #f8f9fa, #ffffff) !important;
}

.empty-state {
    opacity: 0.7;
}

.card {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border: none;
}

.card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

.table-dark th {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    border: none;
}

.summary-info .badge {
    font-size: 0.9rem;
}
</style>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    var selectedItems = [];
    var totalAmount = 0;

    // 初始化页面
    function initPage() {
        loadProducts();
        loadCustomers();
        updateSummary();
    }

    // 加载产品
    function loadProducts() {
        $.ajax({
            url: '{% url "api_products" %}',
            type: 'GET',
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            },
            success: function(products) {
                var $productSelect = $('#productSelect');
                $productSelect.empty();
                $productSelect.append('<option value="">选择产品</option>');
                
                $.each(products, function(index, product) {
                    $productSelect.append('<option value="' + product.id + '" data-price="' + product.price + '">' + 
                        product.name + ' - ¥' + product.price + '</option>');
                });
            },
            error: function() {
                console.error('加载产品失败');
            }
        });
    }

    // 加载客户
    function loadCustomers() {
        $.ajax({
            url: '{% url "api_customers" %}',
            type: 'GET',
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            },
            success: function(customers) {
                var $customerSelect = $('#customerSelect');
                $customerSelect.empty();
                $customerSelect.append('<option value="">选择客户</option>');
                
                $.each(customers, function(index, customer) {
                    $customerSelect.append('<option value="' + customer.id + '">' + customer.name + '</option>');
                });
            },
            error: function() {
                console.error('加载客户失败');
            }
        });
    }

    // 添加产品到报价单
    $('#addProductBtn').click(function() {
        var productId = $('#productSelect').val();
        var productName = $('#productSelect option:selected').text();
        var price = $('#productSelect option:selected').data('price');
        var quantity = $('#quantityInput').val() || 1;
        var discount = $('#discountInput').val() || 0;

        if (!productId) {
            alert('请选择产品');
            return;
        }

        // 添加到列表
        var item = {
            product_id: productId,
            product_name: productName,
            price: parseFloat(price),
            quantity: parseInt(quantity),
            discount: parseFloat(discount),
            subtotal: parseFloat(price) * parseInt(quantity) * (1 - parseFloat(discount) / 100)
        };

        selectedItems.push(item);
        updateItemList();
        updateSummary();
        
        // 清空表单
        $('#productSelect').val('');
        $('#quantityInput').val('1');
        $('#discountInput').val('0');
    });

    // 更新项目列表
    function updateItemList() {
        var $itemList = $('#itemList');
        $itemList.empty();

        $.each(selectedItems, function(index, item) {
            var row = `
                <tr>
                    <td>${item.product_name}</td>
                    <td>¥${item.price.toFixed(2)}</td>
                    <td>${item.quantity}</td>
                    <td>${item.discount}%</td>
                    <td>¥${item.subtotal.toFixed(2)}</td>
                    <td>
                        <button class="btn btn-sm btn-danger" onclick="removeItem(${index})">
                            <i class="fas fa-times"></i>
                        </button>
                    </td>
                </tr>
            `;
            $itemList.append(row);
        });
    }

    // 移除项目
    window.removeItem = function(index) {
        selectedItems.splice(index, 1);
        updateItemList();
        updateSummary();
    };

    // 更新汇总信息
    function updateSummary() {
        totalAmount = selectedItems.reduce(function(sum, item) {
            return sum + item.subtotal;
        }, 0);

        $('#totalAmount').text('¥' + totalAmount.toFixed(2));
        $('#itemCount').text(selectedItems.length);
    }

    // 提交报价单
    $('#createQuotationBtn').click(function() {
        var customerId = $('#customerSelect').val();
        var title = $('#quotationTitle').val();
        var discountRate = $('#quotationDiscount').val() || 0;
        var taxRate = $('#quotationTax').val() || 13;
        var remark = $('#quotationRemark').val();

        if (!customerId) {
            alert('请选择客户');
            return;
        }

        if (selectedItems.length === 0) {
            alert('请添加至少一个产品');
            return;
        }

        var finalAmount = totalAmount * (1 - discountRate / 100) * (1 + taxRate / 100);

        if (!confirm('确定创建报价单？总金额: ¥' + finalAmount.toFixed(2))) {
            return;
        }

        var formData = new FormData();
        formData.append('customer_id', customerId);
        formData.append('title', title);
        formData.append('items', JSON.stringify(selectedItems));
        formData.append('discount_rate', discountRate);
        formData.append('tax_rate', taxRate);
        formData.append('remark', remark);

        $.ajax({
            url: '{% url "order_builder" %}',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRFToken': window.getCSRFToken(),
                'X-Requested-With': 'XMLHttpRequest'
            },
            success: function(response) {
                alert('报价单创建成功！单号: ' + response.quotation_no);
                window.location.href = '/admin-panel/quotation/' + response.quotation_id + '/';
            },
            error: function(xhr) {
                if (xhr.status === 403) {
                    alert('CSRF验证失败，请刷新页面后重试');
                } else {
                    alert('创建报价单失败');
                }
            }
        });
    });

    initPage();
});
</script>
{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="fas fa-file-invoice-dollar me-2"></i>报价管理</h2>
</div>

<div class="row">
    <!-- 左侧：客户信息和产品选择 -->
    <div class="col-lg-5">
        <div class="card mb-4 customer-info-card">
            <div class="card-header bg-primary text-white">
                <h5 class="card-title mb-0"><i class="fas fa-user me-2"></i>客户信息</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label class="form-label">选择客户</label>
                    <select id="customerSelect" class="form-select">
                        <option value="">选择客户</option>
                        {% for customer in customers %}
                        <option value="{{ customer.id }}">{{ customer.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                
                <div class="mb-3">
                    <label class="form-label">报价单标题</label>
                    <input type="text" id="quotationTitle" class="form-control" placeholder="请输入报价单标题">
                </div>
            </div>
        </div>

        <div class="card product-selection-card">
            <div class="card-header bg-success text-white">
                <h5 class="card-title mb-0"><i class="fas fa-plus me-2"></i>添加产品</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label class="form-label">选择产品</label>
                    <select id="productSelect" class="form-select">
                        <option value="">选择产品</option>
                        {% for product in products %}
                        <option value="{{ product.id }}" data-price="{{ product.latest_price.price|default:0 }}">
                            {{ product.name }} - ¥{{ product.latest_price.price|default:"0.00" }}
                        </option>
                        {% endfor %}
                    </select>
                </div>

                <div class="row">
                    <div class="col-6">
                        <label class="form-label">数量</label>
                        <input type="number" id="quantityInput" class="form-control" value="1" min="1">
                    </div>
                    <div class="col-6">
                        <label class="form-label">折扣(%)</label>
                        <input type="number" id="discountInput" class="form-control" value="0" min="0" max="100">
                    </div>
                </div>

                <button id="addProductBtn" class="btn btn-primary w-100 mt-3">
                    <i class="fas fa-plus me-1"></i>添加到报价单
                </button>
            </div>
        </div>
    </div>

    <!-- 右侧：报价单明细和汇总 -->
    <div class="col-lg-7">
        <div class="card mb-4 quotation-details-card">
            <div class="card-header bg-info text-white">
                <h5 class="card-title mb-0"><i class="fas fa-list me-2"></i>报价单明细</h5>
            </div>
            <div class="card-body">
                {% if products %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead class="table-dark">
                            <tr>
                                <th>产品名称</th>
                                <th>单价</th>
                                <th>数量</th>
                                <th>折扣</th>
                                <th>小计</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="itemList">
                            <!-- 动态生成 -->
                        </tbody>
                    </table>
                </div>
                {% else %}
                <div class="text-center py-4 empty-state">
                    <i class="fas fa-shopping-cart fa-3x text-muted mb-3"></i>
                    <p class="text-muted">请先从左侧添加产品</p>
                </div>
                {% endif %}
            </div>
        </div>

        <div class="card quotation-settings-card">
            <div class="card-header bg-warning text-dark">
                <h5 class="card-title mb-0"><i class="fas fa-cog me-2"></i>报价单设置</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">整体折扣率(%)</label>
                        <input type="number" id="quotationDiscount" class="form-control" value="0" min="0" max="100">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label">税率(%)</label>
                        <input type="number" id="quotationTax" class="form-control" value="13" min="0" max="100">
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label">备注</label>
                    <textarea id="quotationRemark" class="form-control" rows="3" placeholder="请输入备注信息"></textarea>
                </div>

                <div class="quotation-summary p-3 bg-light rounded">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="summary-info">
                            <strong class="text-primary">项目数量: </strong><span id="itemCount" class="badge bg-primary">0</span>
                            <strong class="text-success ms-3">总金额: </strong><span id="totalAmount" class="text-success fs-5 fw-bold">¥0.00</span>
                        </div>
                        <button id="createQuotationBtn" class="btn btn-success btn-lg">
                            <i class="fas fa-check me-1"></i>创建报价单
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}