@extends('layouts.app')

@section('title', 'Imóveis para ' . ucfirst($bType->name) . ' - ' . ucfirst($pType->name) . ' - NT Imobi AI')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <div class="mb-8">
        <h1 class="text-3xl font-extrabold text-slate-900">
            {{ ucfirst($pType->name) }} para {{ ucfirst($bType->name) }}
        </h1>
        <p class="text-sm text-slate-500 mt-1">Foram encontrados {{ $properties->total() }} imóveis nesta categoria.</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
        @forelse($properties as $property)
            <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden hover:shadow-md transition">
                <div class="h-48 bg-slate-200 relative">
                    @if($property->images->count() > 0)
                        <img src="{{ asset('storage/' . $property->images->first()->image_path) }}" alt="{{ $property->title }}" class="w-full h-full object-cover">
                    @else
                        <div class="flex items-center justify-center h-full text-slate-400 text-xs">Sem foto</div>
                    @endif
                    <span class="absolute top-3 left-3 bg-slate-900 text-amber-400 text-xs font-bold px-2.5 py-1 rounded">
                        #{{ $property->code }}
                    </span>
                </div>
                <div class="p-4">
                    <span class="text-xs font-semibold text-indigo-600 uppercase">{{ $property->property_type }}</span>
                    <h3 class="font-bold text-slate-800 text-base truncate mt-1">{{ $property->title }}</h3>
                    <p class="text-xs text-slate-500 truncate mb-3">{{ $property->city }} - {{ $property->neighborhood }}</p>
                    <div class="flex justify-between items-center pt-3 border-t border-slate-100">
                        <span class="text-lg font-extrabold text-slate-900">R$ {{ number_format($property->price, 2, ',', '.') }}</span>
                        <a href="{{ route('site.properties.show', $property->slug) }}" class="bg-amber-500 hover:bg-amber-600 text-slate-950 font-semibold px-3 py-1.5 rounded text-xs transition">
                            Detalhes
                        </a>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-span-full py-12 text-center text-slate-500">
                Nenhum imóvel disponível no momento para esta combinação de finalidade e tipo.
            </div>
        @endforelse
    </div>

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