@extends('layout')

@section('content')
<h1 class="text-3xl font-bold text-gray-900 mb-8 text-center">Our Products</h1>

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
    @foreach($products as $product)
    <div class="bg-white rounded-lg shadow overflow-hidden flex flex-col">
        <div class="h-48 bg-gray-200 flex items-center justify-center">
            @if($product->image)
                <img src="{{ asset('storage/'.$product->image) }}" alt="{{ $product->name }}" class="object-cover h-full w-full">
            @else
                <span class="text-gray-400">No Image</span>
            @endif
        </div>
        <div class="p-6 flex-1 flex flex-col">
            <h2 class="text-xl font-semibold text-gray-900">{{ $product->name }}</h2>
            <p class="text-gray-500 mt-2 mb-4 flex-1 line-clamp-2">{{ $product->description }}</p>
            <div class="flex items-center justify-between mt-auto">
                <span class="text-lg font-bold text-blue-600 hidden">₹ {{ is_numeric($product->price_range) ? number_format($product->price_range, 2) : $product->price_range }}</span>
                <a href="{{ route('shop.show', $product) }}" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">View Details</a>
            </div>
        </div>
    </div>
    @endforeach
</div>
@endsection