{% extends "inventory/base.html" %}
{% load static %}

{% block title %}生成商品条码{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="card shadow">
        <div class="card-header bg-primary text-white">
            <h5 class="mb-0">生成商品条码</h5>
        </div>
        <div class="card-body">
            <form method="post" id="barcode-form">
                {% csrf_token %}
                
                <div class="row mb-4">
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header bg-light">
                                <h6 class="mb-0">选择商品</h6>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <label for="category-filter" class="form-label">按分类筛选</label>
                                    <select class="form-select" id="category-filter">
                                        <option value="">所有分类</option>
                                        {% for category in categories %}
                                            <option value="{{ category.id }}">{{ category.name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                
                                <div class="mb-3">
                                    <label for="product_id" class="form-label">选择商品 <span class="text-danger">*</span></label>
                                    <select class="form-select" id="product_id" name="product_id" required>
                                        <option value="">-- 请选择商品 --</option>
                                        {% for product in products %}
                                            <option value="{{ product.id }}" {% if product.id == product.id %}selected{% endif %}>
                                                {{ product.name }} ({{ product.barcode|default:"无条码" }})
                                            </option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header bg-light">
                                <h6 class="mb-0">条码设置</h6>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <label for="quantity" class="form-label">打印数量</label>
                                    <input type="number" class="form-control" id="quantity" name="quantity" value="1" min="1" max="100">
                                </div>
                                
                                <div class="mb-3">
                                    <label for="price_type" class="form-label">价格类型</label>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="price_type" id="retail_price" value="retail" checked>
                                        <label class="form-check-label" for="retail_price">零售价</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="price_type" id="wholesale_price" value="wholesale">
                                        <label class="form-check-label" for="wholesale_price">批发价</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="text-center">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-barcode"></i> 生成条码
                    </button>
                    <a href="{% url 'bulk_barcode_generation' %}" class="btn btn-outline-secondary ms-2">
                        <i class="fas fa-th"></i> 批量生成
                    </a>
                </div>
            </form>
            
            {% if product %}
            <div class="mt-4">
                <div class="card">
                    <div class="card-header bg-light">
                        <h6 class="mb-0">商品信息</h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <p><strong>商品名称:</strong> {{ product.name }}</p>
                                <p><strong>条码:</strong> {{ product.barcode|default:"未设置" }}</p>
                                <p><strong>分类:</strong> {{ product.category.name|default:"未分类" }}</p>
                                <p><strong>零售价:</strong> ¥{{ product.retail_price }}</p>
                                <p><strong>批发价:</strong> ¥{{ product.wholesale_price }}</p>
                            </div>
                            <div class="col-md-6">
                                {% if product.image %}
                                <img src="{{ product.image.url }}" alt="{{ product.name }}" class="img-thumbnail" style="max-height: 150px">
                                {% else %}
                                <div class="text-center p-4 bg-light">
                                    <i class="fas fa-image fa-3x text-muted"></i>
                                    <p class="mt-2 text-muted">无商品图片</p>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    $(document).ready(function() {
        // 增强商品选择器
        $('#product_id').select2({
            placeholder: '请选择商品',
            allowClear: true
        });
        
        // 分类筛选
        $('#category-filter').change(function() {
            let categoryId = $(this).val();
            let $productSelect = $('#product_id');
            
            if (categoryId) {
                // 只显示选定分类的商品
                $productSelect.find('option').hide();
                $productSelect.find('option[value=""]').show();
                $productSelect.find('option[data-category="' + categoryId + '"]').show();
                
                // 如果当前选择的选项不可见，则清除选择
                if ($productSelect.find('option:selected').is(':hidden')) {
                    $productSelect.val('').trigger('change');
                }
            } else {
                // 显示所有商品
                $productSelect.find('option').show();
            }
        });
        
        // 为每个商品选项添加分类数据属性
        {% for product in products %}
            {% if product.category %}
                $('#product_id option[value="{{ product.id }}"]').attr('data-category', '{{ product.category.id }}');
            {% endif %}
        {% endfor %}
    });
</script>
{% endblock %}