@extends('layouts.app')

@section('title', 'Find Your Dream Home')

@section('content')
<div class="max-w-7xl mx-auto py-12 px-4">
    <div class="text-center mb-10">
        <h1 class="text-4xl font-bold text-gray-800">Find Your Dream Home</h1>
        <p class="text-gray-600 mt-2">Browse properties or post your own.</p>
    </div>

    {{-- 🔍 Filter Form --}}
    <form method="GET" action="{{ route('home') }}" class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-10">
        <input type="text" name="city" value="{{ request('city') }}" placeholder="City" class="border p-2 rounded w-full">

        <select name="type" class="border p-2 rounded w-full">
            <option value="">Any Type</option>
            <option value="apartment" {{ request('type') == 'apartment' ? 'selected' : '' }}>Apartment</option>
            <option value="villa" {{ request('type') == 'villa' ? 'selected' : '' }}>Villa</option>
            <option value="bungalow" {{ request('type') == 'bungalow' ? 'selected' : '' }}>Bungalow</option>
        </select>

        <select name="price" class="border p-2 rounded w-full">
            <option value="">Any Price</option>
            <option value="15000000" {{ request('price') == '15000000' ? 'selected' : '' }}>Up to ₦15M</option>
            <option value="25000000" {{ request('price') == '25000000' ? 'selected' : '' }}>Up to ₦25M</option>
            <option value="50000000" {{ request('price') == '50000000' ? 'selected' : '' }}>Up to ₦50M</option>
        </select>

        <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition">Filter</button>
    </form>

    {{-- 📍 Geolocation Button --}}
<div class="mb-6">
    <button id="locateBtn" class="bg-gray-700 text-white px-4 py-2 rounded hover:bg-gray-800 transition">
        📍 Use My Location
    </button>
    <div id="locationOutput" class="mt-2 text-sm text-gray-600"></div>
</div>

{{-- 🌍 Location Info Message --}}
@if(session('user_location'))
    <p class="text-sm text-green-600 mb-4">Showing properties near your location.</p>
@endif

    {{-- 📲 Install App Button --}}
    <div class="text-center mt-6">
        <button id="installBtn" style="display: none;" class="bg-blue-600 text-white px-4 py-2 rounded">
            📲 Install App
        </button>
    </div>

    {{-- 🏠 Property Grid --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 mt-10">
        @forelse ($properties as $property)
            @php
                $imageArray = is_array($property->images) ? $property->images : json_decode($property->images, true) ?? [];
                $firstImage = $imageArray[0] ?? $property->image_url;
                $displayImage = $firstImage ?? asset('storage/default_blurred.jpg');
                $agent = $property->agent;
                $isVerified = $agent && $agent->is_verified;
                $canWhatsapp = optional($agent->plan)->can_whatsapp;
                $phone = preg_replace('/[^0-9]/', '', $agent->phone_number ?? '');
            @endphp

            <div class="bg-white rounded-lg shadow-md overflow-hidden relative border {{ $property->is_featured ? 'border-yellow-400' : 'border-gray-200' }}">
                {{-- 🌟 Featured Badge --}}
                @if($property->is_featured)
                    <div class="absolute top-0 left-0 bg-yellow-400 text-white text-xs px-2 py-1 rounded-br">
                        🌟 Featured
                    </div>
                @endif

                <img src="{{ $displayImage }}" alt="{{ $property->title }}" class="w-full h-48 object-cover">

                <div class="p-4">
                    <h3 class="text-xl font-semibold text-gray-800 mb-1">{{ $property->title }}</h3>
                    <p class="text-sm text-gray-600 mb-1">{{ \Illuminate\Support\Str::limit($property->description, 80) }}</p>
                    <p class="text-blue-600 font-bold text-lg">₦{{ number_format($property->price, 2) }}</p>
                    <p class="text-sm text-gray-500 mt-1">📍 {{ $property->city ?? 'City Not Provided' }}</p>

                    {{-- 👤 Agent Info --}}
                    <p class="text-xs text-gray-400 mt-2 flex items-center gap-2">
                        👤 Agent: {{ $agent->name ?? 'Unknown' }}
                        @if($agent && $agent->isVerified())
                            <span class="inline-block bg-green-100 text-green-700 text-[10px] font-semibold px-2 py-0.5 rounded">
                                ✔ Verified Agent
                            </span>
                        @else
                            <span class="inline-block bg-gray-100 text-gray-500 text-[10px] font-medium px-2 py-0.5 rounded">
                                ⛔ Unverified
                            </span>
                        @endif
                    </p>

                    @if($agent && $agent->phone_number)
                        <p class="text-xs text-gray-400 mt-1">
                            📞 <a href="tel:{{ $agent->phone_number }}" class="text-blue-600 hover:underline">{{ $agent->phone_number }}</a>
                        </p>
                    @endif

                    {{-- 💬 WhatsApp Contact --}}
                    @if($canWhatsapp && $phone)
                        <a href="https://wa.me/{{ $phone }}?text=Hello%20{{ urlencode($agent->name ?? '') }},%20I%20saw%20your%20property%20listing%20on%20our%20site." 
                           target="_blank"
                           class="inline-block mt-2 bg-green-500 text-white text-sm px-3 py-1 rounded hover:bg-green-600 transition">
                            💬 WhatsApp Agent
                        </a>
                    @endif
                </div>
            </div>
        @empty
            <p class="text-center col-span-3 text-gray-500">No properties listed yet. Try adjusting your filters.</p>
        @endforelse
    </div>
</div>

@endsection