@extends('layouts.app')

@section('title', 'Imóveis à Venda e Aluguel - NT Imobi AI')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">

    <!-- Bloco de Filtro Avançado -->
    <section class="bg-white p-6 rounded-xl shadow-sm border border-slate-200 mb-8">
        <h2 class="text-lg font-bold text-slate-800 mb-4">Encontre seu Imóvel</h2>
        <form action="{{ route('site.properties.index') }}" method="GET" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-6 gap-4">
            
            <!-- Finalidade -->
            <div>
                <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Finalidade</label>
                <select name="business_type" class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:ring-amber-500 focus:border-amber-500">
                    <option value="">Comprar ou Alugar</option>
                    <option value="venda" @selected(request('business_type') === 'venda')>Comprar</option>
                    <option value="aluguel" @selected(request('business_type') === 'aluguel')>Alugar</option>
                </select>
            </div>

            <!-- Tipo de Imóvel -->
            <div>
                <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Tipo de Imóvel</label>
                <select name="property_type" class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:ring-amber-500 focus:border-amber-500">
                    <option value="">Todos os Tipos</option>
                    <option value="casa" @selected(request('property_type') === 'casa')>Casa</option>
                    <option value="apartamento" @selected(request('property_type') === 'apartamento')>Apartamento</option>
                    <option value="terreno" @selected(request('property_type') === 'terreno')>Terreno</option>
                    <option value="fazenda" @selected(request('property_type') === 'fazenda')>Fazenda / Sítio</option>
                </select>
            </div>

            <!-- Cidade -->
            <div>
                <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Cidade</label>
                <input type="text" name="city" value="{{ request('city') }}" list="cities-list" placeholder="Ex: Niterói" class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm">
                <datalist id="cities-list">
                    @foreach($cities as $cityOption)
                        <option value="{{ $cityOption }}">
                    @endforeach
                </datalist>
            </div>

            <!-- Bairro -->
            <div>
                <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Bairro</label>
                <input type="text" name="neighborhood" value="{{ request('neighborhood') }}" placeholder="Ex: Icaraí" class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm">
            </div>

            <!-- Valor Máximo -->
            <div>
                <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Valor Máximo (R$)</label>
                <input type="number" name="max_price" value="{{ request('max_price') }}" placeholder="Ex: 850000" class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm">
            </div>

            <!-- Botões -->
            <div class="flex items-end gap-2">
                <button type="submit" class="w-full bg-slate-900 hover:bg-slate-800 text-white font-semibold py-2 px-4 rounded-md text-sm transition">
                    Filtrar
                </button>
                @if(request()->anyFilled(['business_type', 'property_type', 'city', 'neighborhood', 'max_price', 'code']))
                    <a href="{{ route('site.properties.index') }}" class="bg-slate-200 hover:bg-slate-300 text-slate-700 py-2 px-3 rounded-md text-sm" title="Limpar Filtros">
                        ✕
                    </a>
                @endif
            </div>
        </form>
    </section>

    <!-- Cabeçalho da Listagem -->
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold text-slate-900">
            Imóveis Disponíveis <span class="text-sm font-normal text-slate-500">({{ $properties->total() }} encontrados)</span>
        </h1>
    </div>

    <!-- Grid de Imóveis -->
    @if($properties->isEmpty())
        <div class="bg-white rounded-xl p-12 text-center border border-slate-200">
            <p class="text-lg text-slate-600 mb-4">Nenhum imóvel encontrado com os filtros selecionados.</p>
            <a href="{{ route('site.properties.index') }}" class="inline-block bg-amber-500 text-slate-950 font-semibold px-6 py-2.5 rounded-md text-sm">
                Ver todos os imóveis
            </a>
        </div>
    @else
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($properties as $property)
                <article class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden flex flex-col hover:shadow-md transition">
                    <a href="{{ route('site.properties.show', $property->slug) }}" class="relative block h-56 bg-slate-200 overflow-hidden">
                        @if($property->featured_image)
                            <img src="{{ asset('storage/' . $property->featured_image) }}" alt="{{ $property->title }}" class="w-full h-full object-cover hover:scale-105 transition duration-300">
                        @else
                            <div class="w-full h-full flex items-center justify-center text-slate-400 text-sm">Sem foto destacada</div>
                        @endif

                        <!-- Badges Superiores -->
                        <div class="absolute top-3 left-3 flex gap-2">
                            <span class="bg-slate-900/90 text-amber-400 text-xs font-bold px-2.5 py-1 rounded">
                                #{{ $property->code }}
                            </span>
                            <span class="bg-amber-500 text-slate-950 text-xs font-bold uppercase px-2.5 py-1 rounded">
                                {{ $property->business_type }}
                            </span>
                        </div>
                        <span class="absolute bottom-3 right-3 bg-white/90 text-slate-800 text-xs font-semibold capitalize px-2.5 py-1 rounded shadow">
                            {{ $property->property_type }}
                        </span>
                    </a>

                    <div class="p-5 flex-grow flex flex-col justify-between">
                        <div>
                            <p class="text-xs text-slate-500 mb-1">{{ $property->neighborhood }}, {{ $property->city }}</p>
                            <h2 class="text-lg font-bold text-slate-900 mb-2 line-clamp-1">
                                <a href="{{ route('site.properties.show', $property->slug) }}" class="hover:text-amber-600">
                                    {{ $property->title }}
                                </a>
                            </h2>
                            <p class="text-2xl font-extrabold text-slate-900 mb-4">
                                R$ {{ number_format($property->price, 2, ',', '.') }}
                            </p>
                        </div>

                        <!-- Resumo Dinâmico conforme o Tipo de Imóvel -->
                        <div class="border-t border-slate-100 pt-3 text-xs text-slate-600 flex flex-wrap gap-3">
                            @if(in_array($property->property_type, ['casa', 'apartamento']))
                                <span>🛏 {{ $property->details['bedrooms'] ?? 0 }} Qtos</span>
                                <span>🚿 {{ $property->details['bathrooms'] ?? 0 }} Banh</span>
                                <span>🚗 {{ $property->details['garages'] ?? 0 }} Vagas</span>
                                @if(!empty($property->details['built_area']))
                                    <span>📐 {{ $property->details['built_area'] }} m²</span>
                                @endif
                            @elseif($property->property_type === 'terreno')
                                <span>📐 Área: {{ $property->details['total_area'] ?? 'N/I' }} m²</span>
                                @if(!empty($property->details['topography']))
                                    <span>⛰ {{ $property->details['topography'] }}</span>
                                @endif
                            @elseif($property->property_type === 'fazenda')
                                <span>🌾 {{ $property->details['hectares'] ?? 'N/I' }} Hectares</span>
                                @if(!empty($property->details['asphalt_distance']))
                                    <span>🛣 {{ $property->details['asphalt_distance'] }} km do asfalto</span>
                                @endif
                                @if(!empty($property->details['has_lake']))
                                    <span>💧 Com Lagoa</span>
                                @endif
                            @endif
                        </div>
                    </div>
                </article>
            @endforeach
        </div>

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