@forelse($produks as $produk)
    <div class="col-md-6 col-lg-4">
        <div class="card border-0 shadow-sm h-100 product-card position-relative">
            <div class="position-absolute top-0 end-0 m-2 z-2">
                <span class="badge bg-warning text-dark shadow-sm">
                    Stok: {{ $produk->stok }} Kg
                </span>
            </div>

            <div class="overflow-hidden bg-light position-relative" style="height: 200px;">
                <img src="{{ $produk->foto_produk ? asset('storage/' . $produk->foto_produk) : 'https://images.unsplash.com/photo-1586201375761-83865001e31c?q=80&w=800&auto=format&fit=crop' }}"
                    class="card-img-top w-100 h-100 object-fit-cover" alt="{{ $produk->nama_produk }}">
            </div>

            <div class="card-body d-flex justify-content-between flex-column p-3">
                <div>
                    <span class="badge bg-primary mb-2">
                        {{ $produk->kategori->nama_kategori ?? 'Umum' }}
                    </span>

                    <h5 class="fw-bold mb-2 text-dark">{{ $produk->nama_produk }}</h5>

                    <p class="text-muted small mb-3" style="line-height: 1.5;">
                        {{ Str::limit($produk->deskripsi, 60) }}
                    </p>
                </div>

                <div class="d-flex justify-content-between align-items-center pt-3 border-top mt-auto">
                    <div>
                        <small class="text-muted d-block" style="font-size: 0.8rem;">Harga/Kg</small>
                        <h6 class="fw-bold text-primary mb-0">
                            Rp {{ number_format($produk->harga, 0, ',', '.') }}
                        </h6>
                    </div>
                    <a href="{{ route('produk.detail', $produk->id) }}"
                        class="btn btn-primary btn-sm rounded-pill px-3 stretched-link">
                        Lihat <i class="fa fa-arrow-right ms-1"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
@empty
    <div class="col-12">
        <div class="text-center py-5 bg-white rounded-3 shadow-sm border border-dashed">
            <i class="fas fa-search fa-3x text-muted opacity-25 mb-3"></i>
            <h5 class="fw-bold text-dark">Belum ada stok gabah tersedia.</h5>
            <p class="text-muted mb-4">Silakan cek kembali saat musim panen tiba atau reset filter pencarian Anda.</p>
            <a href="{{ route('shop') }}" class="btn btn-outline-primary rounded-pill px-4">
                <i class="fas fa-sync-alt me-2"></i> Reset Filter
            </a>
        </div>
    </div>
@endforelse