{% 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 'barcode_product_create' %}" class="btn btn-success">
                            <i class="bi bi-upc-scan me-1"></i> 扫码添加商品
                        </a>
                        <a href="{% url 'product_create' %}" class="btn btn-primary">
                            <i class="bi bi-plus-circle me-1"></i> 手动添加商品
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="row g-3 mb-4 align-items-center">
                    <div class="col-md-6">
                        <form method="get" action="{% url 'product_list' %}" class="mb-0">
                            <div class="input-group">
                                <span class="input-group-text bg-light"><i class="bi bi-search"></i></span>
                                <input type="text" class="form-control" id="searchInput" name="search" 
                                       placeholder="搜索商品名称或条码..." value="{{ search_query }}">
                                <input type="hidden" name="sort" value="{{ sort_by }}">
                                <input type="hidden" name="category" value="{{ selected_category }}">
                                <input type="hidden" name="status" value="{{ selected_status }}">
                                <button type="submit" class="btn btn-primary">搜索</button>
                            </div>
                        </form>
                    </div>
                    <div class="col-md-6">
                        <div class="d-flex justify-content-md-end">
                            <div class="btn-group me-2">
                                <a href="{% url 'product_list' %}?sort=updated{% if search_query %}&search={{ search_query }}{% endif %}{% if selected_category %}&category={{ selected_category }}{% endif %}{% if selected_status %}&status={{ selected_status }}{% endif %}" 
                                   class="btn btn-outline-secondary {% if sort_by == 'updated' %}active{% endif %}">
                                   <i class="bi bi-clock-history"></i> 最近更新
                                </a>
                                <a href="{% url 'product_list' %}?sort=name{% if search_query %}&search={{ search_query }}{% endif %}{% if selected_category %}&category={{ selected_category }}{% endif %}{% if selected_status %}&status={{ selected_status }}{% endif %}" 
                                   class="btn btn-outline-secondary {% if sort_by == 'name' %}active{% endif %}">
                                   <i class="bi bi-sort-alpha-down"></i> 名称
                                </a>
                                <a href="{% url 'product_list' %}?sort=created{% if search_query %}&search={{ search_query }}{% endif %}{% if selected_category %}&category={{ selected_category }}{% endif %}{% if selected_status %}&status={{ selected_status }}{% endif %}" 
                                   class="btn btn-outline-secondary {% if sort_by == 'created' %}active{% endif %}">
                                   <i class="bi bi-calendar-plus"></i> 创建时间
                                </a>
                            </div>
                            <div class="form-group ms-2" style="min-width: 150px;">
                                <div class="input-group">
                                    <span class="input-group-text bg-light"><i class="bi bi-tag"></i></span>
                                    <select id="categoryDropdown" class="form-select" aria-label="分类筛选">
                                        <option value="" {% if not selected_category %}selected{% endif %}>全部分类</option>
                                        {% for category in categories %}
                                        <option value="{{ category.id }}" {% if selected_category == category.id|stringformat:'s' %}selected{% endif %}>{{ category.name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="table-responsive">
                    <table class="table table-striped table-hover align-middle">
                        <thead class="table-light">
                            <tr>
                                <th>商品名称</th>
                                <th>类别</th>
                                <th>颜色</th>
                                <th>尺码</th>
                                <th>单价</th>
                                <th class="d-none d-md-table-cell">描述</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for product in products %}
                            <tr data-category="{{ product.category.id }}">
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0 me-3">
                                            {% if product.image %}
                                            <img src="{{ product.image.url }}" alt="{{ product.name }}" class="rounded" width="48" height="48" style="object-fit: cover;">
                                            {% else %}
                                            <div class="bg-light rounded d-flex align-items-center justify-content-center" style="width: 48px; height: 48px">
                                                <i class="bi bi-box text-secondary"></i>
                                            </div>
                                            {% endif %}
                                        </div>
                                        <div>
                                            <h6 class="mb-0">{{ product.name }}</h6>
                                            <small class="text-muted">{{ product.barcode }}</small>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <span class="badge bg-info text-dark">{{ product.category.name }}</span>
                                </td>
                                <td>
                                    {% if product.color %}
                                    <span class="badge bg-secondary d-inline-block mb-1">{{ product.get_color_display }}</span>
                                    {% else %}
                                    <span class="text-muted">-</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if product.size %}
                                    <span class="badge bg-dark d-inline-block mb-1">{{ product.get_size_display }}</span>
                                    {% else %}
                                    <span class="text-muted">-</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <span class="fw-bold">¥{{ product.price }}</span>
                                </td>
                                <td class="d-none d-md-table-cell">{{ product.description|truncatewords:10 }}</td>
                                <td>
                                    <div class="btn-group">
                                        <a href="{% url 'product_edit' product.id %}" class="btn btn-sm btn-outline-primary" title="编辑">
                                            <i class="bi bi-pencil"></i>
                                        </a>
                                        <a href="#" class="btn btn-sm btn-outline-danger" title="删除">
                                            <i class="bi bi-trash"></i>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="7" class="text-center py-5">
                                    <div class="d-flex flex-column align-items-center">
                                        <i class="bi bi-inbox text-muted" style="font-size: 2.5rem;"></i>
                                        <p class="mt-3 mb-1">暂无商品数据</p>
                                        <small class="text-muted">点击"添加商品"按钮创建商品</small>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                
                <!-- 添加分页控件 -->
                {% if page_obj.has_other_pages %}
                <div class="d-flex justify-content-center mt-4">
                    <nav aria-label="商品列表分页">
                        <ul class="pagination">
                            {% if page_obj.has_previous %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}{% if selected_category %}&category={{ selected_category }}{% endif %}{% if sort_by %}&sort={{ sort_by }}{% endif %}{% if selected_status %}&status={{ selected_status }}{% endif %}" aria-label="上一页">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            {% else %}
                            <li class="page-item disabled">
                                <a class="page-link" href="#" aria-label="上一页">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            {% endif %}
                            
                            {% for i in page_obj.paginator.page_range %}
                                {% if page_obj.number == i %}
                                <li class="page-item active">
                                    <a class="page-link" href="#">{{ i }}</a>
                                </li>
                                {% elif i > page_obj.number|add:"-4" and i < page_obj.number|add:"4" %}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ i }}{% if search_query %}&search={{ search_query }}{% endif %}{% if selected_category %}&category={{ selected_category }}{% endif %}{% if sort_by %}&sort={{ sort_by }}{% endif %}{% if selected_status %}&status={{ selected_status }}{% endif %}">{{ i }}</a>
                                </li>
                                {% endif %}
                            {% endfor %}
                            
                            {% if page_obj.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}{% if selected_category %}&category={{ selected_category }}{% endif %}{% if sort_by %}&sort={{ sort_by }}{% endif %}{% if selected_status %}&status={{ selected_status }}{% endif %}" aria-label="下一页">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                            {% else %}
                            <li class="page-item disabled">
                                <a class="page-link" href="#" aria-label="下一页">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                            {% endif %}
                        </ul>
                    </nav>
                </div>
                {% endif %}
                
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 删除前端搜索过滤逻辑，由后端处理搜索和筛选
        
        // 添加分页导航
        document.querySelectorAll('.page-link').forEach(link => {
            link.addEventListener('click', function(e) {
                if (this.getAttribute('href') === '#') {
                    e.preventDefault();
                }
            });
        });
        
        // 分类下拉列表变化处理
        const categoryDropdown = document.getElementById('categoryDropdown');
        if (categoryDropdown) {
            categoryDropdown.addEventListener('change', function() {
                // 构建URL
                let url = '{% url 'product_list' %}?';
                
                // 添加分类参数 (如果有选择分类)
                if (this.value) {
                    url += 'category=' + this.value;
                }
                
                // 添加排序参数 (如果存在)
                {% if sort_by %}
                url += (url.endsWith('?') ? '' : '&') + 'sort={{ sort_by }}';
                {% endif %}
                
                // 添加搜索参数 (如果存在)
                {% if search_query %}
                url += (url.endsWith('?') ? '' : '&') + 'search={{ search_query }}';
                {% endif %}
                
                // 添加状态参数 (如果存在)
                {% if selected_status %}
                url += (url.endsWith('?') ? '' : '&') + 'status={{ selected_status }}';
                {% endif %}
                
                // 导航到构建的URL
                window.location.href = url;
            });
        }
    });
</script>
{% endblock %}