@extends('layouts.user', ['heading' => 'Shop / शॉप'])

@section('content')
    <div class="grid grid-cols-1 gap-4 md:grid-cols-3 lg:grid-cols-4">
        @forelse($products as $product)
            <div class="rounded-2xl bg-white p-4 shadow">
                <div class="h-40 overflow-hidden rounded-xl bg-slate-100">
                    @if($product->image_path)
                        <img src="{{ asset('storage/'.$product->image_path) }}" alt="{{ $product->name }}" class="h-full w-full object-cover">
                    @else
                        <div class="flex h-full items-center justify-center text-sm text-slate-400">No Image</div>
                    @endif
                </div>
                <div class="mt-3 text-sm font-semibold">{{ $product->name }}</div>
                <div class="text-xs text-slate-500">SKU: {{ $product->sku }}</div>
                <div class="mt-2 text-sm text-slate-600">BV: {{ number_format((float) $product->bv, 2) }}</div>
                <div class="mt-1 text-lg font-bold">₹ {{ number_format((float) $product->dp_price, 2) }}</div>
                <div class="mt-1 text-xs text-slate-500">Stock: {{ $product->stock }}</div>
                <div class="mt-3 flex gap-2">
                    <button type="button" class="flex-1 rounded border px-3 py-2 text-xs">View</button>
                    <button type="button" class="flex-1 rounded bg-emerald-600 px-3 py-2 text-xs text-white">Buy</button>
                </div>
            </div>
        @empty
            <div class="rounded-2xl bg-white p-4 text-center text-slate-500 md:col-span-3 lg:col-span-4">
                No active products found.
            </div>
        @endforelse
    </div>

    <div class="mt-4">{{ $products->links() }}</div>
@endsection