@if($products->count() > 0)
    <div class="products-grid">
        @foreach($products as $product)
            <div class="product-card">
                <div class="product-header">
                    <h3 class="product-name">{{ $product->name }}</h3>
                    @if($product->supplier_sku)
                        <span class="product-sku">Артикул системы: {{ $product->sku }}</span>
                    @endif
                </div>

                <div class="product-details">
                    @if($product->category)
                        <div class="product-category">
                            <i class="fa fa-folder"></i>
                            {{ $product->category->title }}
                            @if($product->subcategory)
                                / {{ $product->subcategory->title }}
                            @endif
                        </div>
                    @endif

                    <div class="product-price">
                        <i class="fa fa-ruble-sign"></i>
                        <strong>{{ number_format($product->price, 2, ',', ' ') }} ₽</strong>
                    </div>

                    <div class="product-quantity">
                        <i class="fa fa-boxes"></i>
                        В наличии: <span class="quantity-value">{{ $product->quantity ?? 0 }}</span>
                    </div>

                    @if($product->description)
                        <div class="product-description">
                            {{ Str::limit($product->description, 100) }}
                        </div>
                    @endif
                </div>

                <div class="product-actions">
                    <div class="product-status">
                        @if($product->quantity > 0)
                            <span class="status-badge in-stock">
                                <i class="fa fa-check"></i>
                                В наличии
                            </span>
                        @else
                            <span class="status-badge out-of-stock">
                                <i class="fa fa-times"></i>
                                Нет в наличии
                            </span>
                        @endif
                    </div>

                    <div class="product-meta">
                        <small class="text-muted">
                            Создан: {{ $product->created_at->format('d.m.Y H:i') }}
                        </small>
                        @if($product->updated_at != $product->created_at)
                            <small class="text-muted">
                                Обновлен: {{ $product->updated_at->format('d.m.Y H:i') }}
                            </small>
                        @endif
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    @if($products->hasPages())
        <div class="pagination-wrapper">
            {{ $products->appends(request()->query())->links('pagination::bootstrap-4') }}
        </div>
    @endif
@else
    <div class="empty-state">
        <div class="empty-state-icon">
            <i class="fa fa-box-open"></i>
        </div>
        <h3 class="empty-state-title">Товары не найдены</h3>
        <p class="empty-state-description">
            @if(request('search') || request('category_id'))
                По вашему запросу товары не найдены. Попробуйте изменить критерии поиска.
            @else
                У вас пока нет добавленных товаров. Загрузите прайс-лист для добавления товаров.
            @endif
        </p>

        @if(!request('search') && !request('category_id'))
            <div class="empty-state-actions">
                <button class="btn btn-primary" id="upload-price-btn-empty">
                    <i class="fa fa-upload"></i>
                    Загрузить прайс-лист
                </button>
            </div>
        @else
            <div class="empty-state-actions">
                <button class="btn btn-secondary" onclick="clearFilters()">
                    <i class="fa fa-times"></i>
                    Очистить фильтры
                </button>
            </div>
        @endif
    </div>
@endif

<style>
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.product-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border: 1px solid #e9ecef;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.product-header {
    margin-bottom: 15px;
}

.product-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 5px 0;
    line-height: 1.3;
}

.product-sku {
    font-size: 0.85rem;
    color: #666;
    background: #f8f9fa;
    padding: 2px 8px;
    border-radius: 4px;
}

.product-details {
    margin-bottom: 15px;
}

.product-category,
.product-price,
.product-quantity {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.product-category i,
.product-price i,
.product-quantity i {
    width: 16px;
    margin-right: 8px;
    color: #666;
}

.product-price strong {
    color: #217b00;
}

.quantity-value {
    font-weight: 600;
    color: #333;
}

.product-description {
    margin-top: 10px;
    font-size: 0.85rem;
    color: #666;
    line-height: 1.4;
}

.product-actions {
    border-top: 1px solid #e9ecef;
    padding-top: 15px;
}

.product-status {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-badge i {
    font-size: 0.7rem;
}


.status-badge.in-stock {
    background: #d4edda;
    color: #155724;
}

.status-badge.out-of-stock {
    background: #f8d7da;
    color: #721c24;
}

.product-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.product-meta small {
    font-size: 0.75rem;
}

.pagination-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
}

.empty-state-icon {
    font-size: 4rem;
    color: #dee2e6;
    margin-bottom: 20px;
}

.empty-state-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
}

.empty-state-description {
    font-size: 1rem;
    color: #666;
    max-width: 500px;
    margin: 0 auto 30px;
    line-height: 1.5;
}

.empty-state-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: 1fr;
    }

    .empty-state {
        padding: 40px 15px;
    }

    .empty-state-icon {
        font-size: 3rem;
    }

    .empty-state-title {
        font-size: 1.25rem;
    }
}
</style>

<script>
// Обработчик для кнопки загрузки в пустом состоянии
document.addEventListener('DOMContentLoaded', function() {
    const uploadBtnEmpty = document.getElementById('upload-price-btn-empty');
    if (uploadBtnEmpty) {
        uploadBtnEmpty.addEventListener('click', function() {
            // Вызываем тот же модал, что и основная кнопка
            const uploadModal = document.getElementById('upload-modal');
            if (uploadModal) {
                uploadModal.style.display = 'block';
            }
        });
    }
});

// Функция очистки фильтров
function clearFilters() {
    const searchInput = document.getElementById('products-search');
    const categoryFilter = document.getElementById('category-filter');

    if (searchInput) searchInput.value = '';
    if (categoryFilter) categoryFilter.value = '';

    // Перезагружаем товары без фильтров
    if (typeof loadProducts === 'function') {
        loadProducts(1, '', '');
    }
}
</script>