@if($products->count() === 0)
<div class="col-span-full text-center py-12">
    <svg class="w-16 h-16 mx-auto mb-4 text-slate-300 dark:text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
    </svg>
    <p class="text-slate-500 dark:text-slate-400 text-sm">Tidak ada produk untuk kategori ini</p>
</div>
@else
@foreach($products as $index => $product)
@php
    $stock = (int) ($product->stock ?? 0);
    $gradients = [
        'from-blue-500/10 to-cyan-500/10 dark:from-blue-500/20 dark:to-cyan-500/20',
        'from-emerald-500/10 to-teal-500/10 dark:from-emerald-500/20 dark:to-teal-500/20',
        'from-violet-500/10 to-purple-500/10 dark:from-violet-500/20 dark:to-purple-500/20',
        'from-amber-500/10 to-orange-500/10 dark:from-amber-500/20 dark:to-orange-500/20',
        'from-rose-500/10 to-pink-500/10 dark:from-rose-500/20 dark:to-pink-500/20',
        'from-indigo-500/10 to-blue-500/10 dark:from-indigo-500/20 dark:to-blue-500/20',
    ];
    $bgGradients = [
        'from-blue-500 to-cyan-500',
        'from-emerald-500 to-teal-500',
        'from-violet-500 to-purple-500',
        'from-amber-500 to-orange-500',
        'from-rose-500 to-pink-500',
        'from-indigo-500 to-blue-500',
    ];
    $gradient = $gradients[$index % count($gradients)];
    $bgGradient = $bgGradients[$index % count($bgGradients)];
@endphp
<div class="pos-product-card group relative overflow-hidden rounded-lg sm:rounded-xl bg-gradient-to-br {{ $gradient }} border border-transparent cursor-pointer hover:shadow-lg hover:border-blue-300 dark:hover:border-blue-600 transition-all hover:-translate-y-1"
     data-product-id="{{ $product->id }}"
     data-product-name="{{ addslashes($product->name) }}"
     data-product-price="{{ $product->price }}"
     data-product-stock="{{ $stock }}"
     data-product-min-stock="{{ $product->min_stock ?? 5 }}"
     data-product-track-stock="{{ $product->track_stock ? '1' : '0' }}">
    <!-- Image Container -->
    <div class="pos-product-image aspect-[4/3] sm:aspect-[4/3] overflow-hidden relative">
        @if($product->image)
        <img src="{{ $product->image_url }}" alt="{{ $product->name }}" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
        @else
        <div class="w-full h-full bg-gradient-to-br {{ $bgGradient }} flex items-center justify-center">
            <div class="pos-product-icon w-10 h-10 sm:w-12 sm:h-12 bg-white/30 rounded-full flex items-center justify-center backdrop-blur-sm">
                <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
                </svg>
            </div>
        </div>
        @endif
        
        <!-- Category Badge - Bottom of Image -->
        @if($product->category)
        <div class="product-category-badge absolute bottom-1.5 left-1.5 px-1.5 py-1 sm:bottom-2 sm:left-2 sm:px-2 sm:py-1.5 bg-gradient-to-r from-blue-600 to-indigo-600 text-white text-[10px] sm:text-xs font-semibold rounded-md sm:rounded-lg shadow-lg backdrop-blur-sm max-w-[70%] truncate">
            {{ $product->category->name }}
        </div>
        @endif
        
        <!-- Stock Badges Container -->
        <div class="js-stock-badges-container">
            <!-- Low Stock Badge -->
            @if($product->track_stock && $stock <= 0)
            <div class="low-stock-badge absolute top-1.5 right-1.5 px-1.5 py-1 sm:top-2 sm:right-2 sm:px-2 sm:py-1 bg-gradient-to-r from-red-500 to-rose-500 text-white text-[10px] sm:text-xs font-semibold rounded-md sm:rounded-lg shadow-lg backdrop-blur-sm">
                Stok Habis
            </div>
            @elseif($product->track_stock && $stock <= $product->min_stock * 2)
            <div class="low-stock-badge absolute top-1.5 right-1.5 px-1.5 py-1 sm:top-2 sm:right-2 sm:px-2 sm:py-1 bg-gradient-to-r from-amber-500 to-orange-500 text-white text-[10px] sm:text-xs font-semibold rounded-md sm:rounded-lg shadow-lg backdrop-blur-sm">
                Stok Tipis
            </div>
            @endif

            @if($product->track_stock && $stock > 0)
            <div class="product-stock-badge absolute top-1.5 left-1.5 px-1.5 py-1 sm:top-2 sm:left-2 sm:px-2 sm:py-1 bg-slate-900/75 text-white text-[10px] sm:text-xs font-semibold rounded-md sm:rounded-lg shadow-lg backdrop-blur-sm">
                Stok {{ $stock }}
            </div>
            @endif
        </div>
    </div>
    <!-- Product Info -->
    <div class="product-info p-2 sm:p-3">
        <h3 class="product-name text-[11px] sm:text-sm font-medium text-slate-900 dark:text-white truncate mb-1 sm:mb-2 leading-snug">{{ $product->name }}</h3>
        <div class="flex items-center justify-between">
            <span class="product-price text-[11px] sm:text-sm font-bold bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent">Rp {{ number_format($product->price, 0, ',', '.') }}</span>
            <div class="js-stock-info-container">
                @if($product->track_stock && $stock <= 0)
                <span class="inline-flex items-center px-1.5 py-0.5 rounded-full bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400 text-[10px] sm:text-xs font-semibold">
                    stok 0
                </span>
                @endif
            </div>
        </div>
    </div>
</div>
@endforeach
@endif

@if($products->hasPages())
<div class="col-span-full mt-4 pt-4 border-t border-gray-200 dark:border-slate-700">
    <div class="flex justify-center">
        {{ $products->links() }}
    </div>
</div>
@endif