@extends('layouts.app')

@section('title', $property->title . ' (#' . $property->code . ') - NT Imobi AI')

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

    <!-- Cabeçalho do Imóvel -->
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6">
        <div>
            <div class="flex items-center gap-2 mb-2">
                <span class="bg-slate-900 text-amber-400 text-xs font-bold px-3 py-1 rounded">
                    Código: #{{ $property->code }}
                </span>
                <span class="bg-amber-500 text-slate-950 text-xs font-bold uppercase px-3 py-1 rounded">
                    {{ $property->business_type }}
                </span>
                <span class="bg-slate-200 text-slate-800 text-xs font-semibold capitalize px-3 py-1 rounded">
                    {{ $property->property_type }}
                </span>
            </div>
            <h1 class="text-2xl md:text-3xl font-extrabold text-slate-900">{{ $property->title }}</h1>
            <p class="text-slate-600 text-sm mt-1">
                📍 {{ $property->address ? $property->address . ' - ' : '' }}{{ $property->neighborhood }}, {{ $property->city }}
            </p>
        </div>

        <div class="bg-white px-6 py-4 rounded-xl border border-slate-200 shadow-sm text-right w-full md:w-auto">
            <span class="block text-xs text-slate-500 uppercase">Valor do Imóvel</span>
            <span class="text-3xl font-extrabold text-slate-900">
                R$ {{ number_format($property->price, 2, ',', '.') }}
            </span>
            @if($property->condo_fee || $property->tax_fee)
                <div class="text-xs text-slate-500 mt-1 space-x-3">
                    @if($property->condo_fee)
                        <span>Condomínio: R$ {{ number_format($property->condo_fee, 2, ',', '.') }}</span>
                    @endif
                    @if($property->tax_fee)
                        <span>IPTU: R$ {{ number_format($property->tax_fee, 2, ',', '.') }}</span>
                    @endif
                </div>
            @endif
        </div>
    </div>

    <!-- Layout Principal: Galeria + Detalhes (Esquerda) e Formulário de Contato (Direita) -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">

        <!-- Coluna Principal (2/3) -->
        <div class="lg:col-span-2 space-y-8">

            <!-- Galeria de Fotos (Capa + Álbum do Imóvel) com Alpine.js -->
            @php
                $allPhotos = collect();
                if ($property->featured_image) {
                    $allPhotos->push(asset('storage/' . $property->featured_image));
                }
                foreach ($property->images as $img) {
                    $allPhotos->push(asset('storage/' . $img->path));
                }
            @endphp

            <div x-data="{ activePhoto: '{{ $allPhotos->first() ?? '' }}' }" class="bg-white p-4 rounded-xl border border-slate-200 shadow-sm">
                @if($allPhotos->isNotEmpty())
                    <div class="h-80 md:h-[460px] bg-slate-900 rounded-lg overflow-hidden mb-4">
                        <img :src="activePhoto" alt="{{ $property->title }}" class="w-full h-full object-contain">
                    </div>

                    @if($allPhotos->count() > 1)
                        <div class="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-2">
                            @foreach($allPhotos as $photoUrl)
                                <button 
                                    type="button"
                                    @click="activePhoto = '{{ $photoUrl }}'"
                                    :class="activePhoto === '{{ $photoUrl }}' ? 'ring-2 ring-amber-500 opacity-100' : 'opacity-60 hover:opacity-100'"
                                    class="h-16 rounded overflow-hidden bg-slate-100 transition"
                                >
                                    <img src="{{ $photoUrl }}" class="w-full h-full object-cover" alt="Miniatura">
                                </button>
                            @endforeach
                        </div>
                    @endif
                @else
                    <div class="h-72 bg-slate-100 rounded-lg flex items-center justify-center text-slate-400">
                        Nenhuma imagem cadastrada para este imóvel.
                    </div>
                @endif
            </div>

            <!-- Características Específicas por Tipo de Imóvel -->
            <div class="bg-white p-6 rounded-xl border border-slate-200 shadow-sm">
                <h2 class="text-lg font-bold text-slate-900 mb-4 border-b pb-2">Características do Imóvel</h2>

                @if(in_array($property->property_type, ['casa', 'apartamento']))
                    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-4 text-center">
                        <div class="bg-slate-50 p-3 rounded-lg border border-slate-100">
                            <span class="block text-xs text-slate-500">Quartos</span>
                            <span class="text-lg font-bold text-slate-800">{{ $property->details['bedrooms'] ?? 0 }}</span>
                        </div>
                        <div class="bg-slate-50 p-3 rounded-lg border border-slate-100">
                            <span class="block text-xs text-slate-500">Suítes</span>
                            <span class="text-lg font-bold text-slate-800">{{ $property->details['suites'] ?? 0 }}</span>
                        </div>
                        <div class="bg-slate-50 p-3 rounded-lg border border-slate-100">
                            <span class="block text-xs text-slate-500">Banheiros</span>
                            <span class="text-lg font-bold text-slate-800">{{ $property->details['bathrooms'] ?? 0 }}</span>
                        </div>
                        <div class="bg-slate-50 p-3 rounded-lg border border-slate-100">
                            <span class="block text-xs text-slate-500">Garagem</span>
                            <span class="text-lg font-bold text-slate-800">{{ $property->details['garages'] ?? 0 }} vagas</span>
                        </div>
                        <div class="bg-slate-50 p-3 rounded-lg border border-slate-100">
                            <span class="block text-xs text-slate-500">Área Útil</span>
                            <span class="text-lg font-bold text-slate-800">{{ $property->details['built_area'] ?? '-' }} m²</span>
                        </div>
                        <div class="bg-slate-50 p-3 rounded-lg border border-slate-100">
                            <span class="block text-xs text-slate-500">Área Total</span>
                            <span class="text-lg font-bold text-slate-800">{{ $property->details['total_area'] ?? '-' }} m²</span>
                        </div>
                    </div>

                @elseif($property->property_type === 'terreno')
                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-center">
                        <div class="bg-slate-50 p-4 rounded-lg border border-slate-100">
                            <span class="block text-xs text-slate-500">Área Total do Terreno</span>
                            <span class="text-lg font-bold text-slate-800">{{ $property->details['total_area'] ?? 'Não informada' }} m²</span>
                        </div>
                        <div class="bg-slate-50 p-4 rounded-lg border border-slate-100">
                            <span class="block text-xs text-slate-500">Topografia</span>
                            <span class="text-lg font-bold text-slate-800">{{ $property->details['topography'] ?? 'Não informada' }}</span>
                        </div>
                        <div class="bg-slate-50 p-4 rounded-lg border border-slate-100">
                            <span class="block text-xs text-slate-500">Zoneamento / Uso</span>
                            <span class="text-lg font-bold text-slate-800">{{ $property->details['zoning'] ?? 'Não informado' }}</span>
                        </div>
                    </div>

                @elseif($property->property_type === 'fazenda')
                    <div class="grid grid-cols-2 sm:grid-cols-5 gap-4 text-center">
                        <div class="bg-slate-50 p-3 rounded-lg border border-slate-100">
                            <span class="block text-xs text-slate-500">Área em Hectares</span>
                            <span class="text-lg font-bold text-slate-800">{{ $property->details['hectares'] ?? '-' }} ha</span>
                        </div>
                        <div class="bg-slate-50 p-3 rounded-lg border border-slate-100">
                            <span class="block text-xs text-slate-500">Dist. do Asfalto</span>
                            <span class="text-lg font-bold text-slate-800">{{ $property->details['asphalt_distance'] ?? '-' }} km</span>
                        </div>
                        <div class="bg-slate-50 p-3 rounded-lg border border-slate-100">
                            <span class="block text-xs text-slate-500">Possui Lagoa / Açude?</span>
                            <span class="text-lg font-bold text-slate-800">{{ !empty($property->details['has_lake']) ? 'Sim' : 'Não' }}</span>
                        </div>
                        <div class="bg-slate-50 p-3 rounded-lg border border-slate-100">
                            <span class="block text-xs text-slate-500">Rio / Nascente?</span>
                            <span class="text-lg font-bold text-slate-800">{{ !empty($property->details['has_river']) ? 'Sim' : 'Não' }}</span>
                        </div>
                        <div class="bg-slate-50 p-3 rounded-lg border border-slate-100">
                            <span class="block text-xs text-slate-500">Casa Sede?</span>
                            <span class="text-lg font-bold text-slate-800">{{ !empty($property->details['main_house']) ? 'Sim' : 'Não' }}</span>
                        </div>
                    </div>
                @endif
            </div>

            <!-- Descrição Completa -->
            <div class="bg-white p-6 rounded-xl border border-slate-200 shadow-sm">
                <h2 class="text-lg font-bold text-slate-900 mb-3 border-b pb-2">Descrição do Imóvel</h2>
                <div class="text-slate-700 leading-relaxed whitespace-pre-line text-sm">
                    {{ $property->description ?: 'Nenhuma descrição detalhada informada para este imóvel.' }}
                </div>
            </div>
        </div>

        <!-- Coluna Lateral: Formulário de Contato Direto (1/3) -->
        <div class="lg:col-span-1">
            <div class="bg-white p-6 rounded-xl border border-slate-200 shadow-sm sticky top-24">
                <h3 class="text-lg font-bold text-slate-900 mb-1">Interessado neste imóvel?</h3>
                <p class="text-xs text-slate-500 mb-4">Envie uma mensagem direta para nossa equipe informando seus dados.</p>

                <form action="{{ route('site.properties.contact', $property->id) }}" method="POST" class="space-y-4">
                    @csrf

                    <!-- Assunto Fixo com o Código do Imóvel -->
                    <div>
                        <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Assunto</label>
                        <input 
                            type="text" 
                            value="Mais informações sobre o imóvel #{{ $property->code }}" 
                            readonly 
                            class="w-full rounded-md bg-slate-100 border border-slate-300 px-3 py-2 text-xs font-semibold text-slate-700 cursor-not-allowed"
                        >
                    </div>

                    <div>
                        <label for="name" class="block text-xs font-semibold text-slate-700 mb-1">Seu Nome *</label>
                        <input type="text" id="name" name="name" value="{{ old('name') }}" required class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:ring-amber-500 focus:border-amber-500">
                    </div>

                    <div>
                        <label for="email" class="block text-xs font-semibold text-slate-700 mb-1">Seu E-mail *</label>
                        <input type="email" id="email" name="email" value="{{ old('email') }}" required class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:ring-amber-500 focus:border-amber-500">
                    </div>

                    <div>
                        <label for="phone" class="block text-xs font-semibold text-slate-700 mb-1">Telefone / WhatsApp *</label>
                        <input type="text" id="phone" name="phone" value="{{ old('phone') }}" placeholder="(00) 90000-0000" required class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:ring-amber-500 focus:border-amber-500">
                    </div>

                    <div>
                        <label for="message" class="block text-xs font-semibold text-slate-700 mb-1">Mensagem *</label>
                        <textarea id="message" name="message" rows="4" required class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:ring-amber-500 focus:border-amber-500">{{ old('message', "Olá, gostaria de mais informações e agendar uma visita ao imóvel #{$property->code} ({$property->title}).") }}</textarea>
                    </div>

                    <button type="submit" class="w-full bg-amber-500 hover:bg-amber-600 text-slate-950 font-bold py-3 px-4 rounded-md text-sm transition shadow-sm">
                        Solicitar Atendimento
                    </button>
                </form>
            </div>
        </div>

    </div>
</div>
@endsection