@extends('frontend.app')

@section('frontend_app')
<div class="px-4 py-10 max-w-7xl mx-auto">
    <h2 class="text-2xl font-bold mb-6">Results for: {{ ucfirst($category ?? 'All') }}</h2>
     <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-6">
        @foreach ($properties as $property)
        <div class="property-cards w-full bg-gray-100 p-2 rounded-md group flex flex-col justify-between" data-category="{{ $property['category_name'] }}">
            <a href="{{ route('property.details', ['category' => $property['category_name'], 'slug' => $property['slug']]) }}" class="inline-block overflow-hidden rounded-md relative">
                <span class="text-xs font-medium text-white bg-[var(--primary-color)] px-2 py-1 rounded-full absolute top-2 right-2 z-10 capitalize">
                    for {{ $property['category_name'] }}
                </span>
                <img class="aspect-video object-cover object-center group-hover:scale-150 transition-all duration-700"
                    src="{{ asset($property['banner_img']) }}"
                    alt="{{ $property['property_name'] }}">
            </a>
            <div class="px-1 py-2">
                <a href="{{ route('property.details', ['category' => $property['category_name'], 'slug' => $property['slug']]) }}"
                class="line-clamp-2 text-lg font-semibold">
                    {{ $property['property_name'] }}
                </a>
                <div class="bg-gray-50 p-4 flex justify-start items-center flex-wrap gap-4 rounded-lg mt-2 mb-4">
                    <div class="flex items-center gap-x-2 opacity-70">
                        <span class="text-sm font-medium">{{ $property['detail']['bedrooms'] ?? '0' }} Bedrooms</span>
                    </div>
                    <div class="flex items-center gap-x-2 opacity-70">
                        <span class="text-sm font-medium">{{ $property['detail']['bathroom'] ?? '0' }} Bathrooms</span>
                    </div>
                    <div class="flex items-center gap-x-2 opacity-70">
                        <span class="text-sm font-medium">{{ $property['detail']['property_size'] ?? '-' }} SF</span>
                    </div>
                    <div class="flex items-center gap-x-2 opacity-70">
                        <span class="text-sm font-medium">
                            {{ $property['address']['area'] ?? '—' }}
                        </span>
                    </div>
                </div>
                <div class="flex justify-between items-end gap-x-5 px-2">
                    <span class="font-medium text-black/40 text-sm">
                        <b class="text-lg text-[var(--primary-color)]">
                            ₹{{ number_format($property['price'], 0, '.', ',') }}
                        </b>
                    </span>
                    <a href="{{ route('property.details', ['category' => $property['category_name'], 'slug' => $property['slug']]) }}"
                    class="inline-block text-sm bg-[var(--primary-color)] py-2 px-4 rounded-md text-white font-medium whitespace-nowrap">
                        View Details
                    </a>
                </div>
            </div>
        </div>
        @endforeach
     </div>

</div>
@endsection