@extends('layouts.app')

@section('title', 'Property Listings')

@section('content')
<div class="max-w-7xl mx-auto py-10 px-4">
    <h2 class="text-3xl font-bold mb-2 text-gray-800">Latest Properties</h2>

    {{-- ✅ Usage Feedback --}}
    @if(auth()->check() && auth()->user()->plan)
        <p class="mb-6 text-sm text-gray-600">
            You’ve used {{ auth()->user()->properties()->count() }} of 
            {{ auth()->user()->plan->listing_limit ?? '∞' }} listings.
        </p>
    @endif

    @if($properties->isEmpty())
        <p class="text-gray-600">No properties available at the moment. Please check back later.</p>
    @else
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach ($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 = $agent && optional($agent->plan)->can_whatsapp;
                    $phone = preg_replace('/[^0-9]/', '', $agent->phone_number ?? '');
                @endphp

                <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition relative">
                    {{-- 🌟 Featured Tag --}}
                    @if($property->is_featured)
                        <span class="absolute top-0 left-0 bg-yellow-400 text-white px-2 py-1 text-xs rounded-br-md z-10">
                            🌟 Featured
                        </span>
                    @endif

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

                    <div class="p-5">
                        <h3 class="text-xl font-semibold text-gray-800 mb-1">
                            {{ $property->title }}
                        </h3>
                        <p class="text-sm text-gray-500 mb-1">
                            {{ ucfirst($property->type) }} • {{ $property->city ?? 'Unknown City' }}
                        </p>
                        <p class="text-blue-600 font-bold text-lg mb-2">
                            ₦{{ number_format($property->price, 0) }}
                        </p>

                        {{-- Agent Info --}}
                        @if($agent)
                            <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->phone_number)
                                <p class="text-xs text-gray-500 mb-2">
                                    📞 {{ $agent->phone_number }}
                                </p>
                            @endif
                        @else
                            <p class="text-xs text-gray-400 italic">Agent info unavailable.</p>
                        @endif

                        {{-- ✅ WhatsApp Contact --}}
                        @if($canWhatsapp && $phone)
                            <a href="https://wa.me/{{ $phone }}?text=Hi%20{{ urlencode($agent->name ?? '') }},%20I%20saw%20your%20listing%20on%20the%20site."
                               target="_blank"
                               class="inline-block text-green-600 text-sm font-medium hover:underline">
                                💬 Contact via WhatsApp
                            </a>
                        @else
                            <p class="text-xs text-gray-400 italic">WhatsApp not available.</p>
                        @endif

                        {{-- View Details --}}
                        <a href="{{ route('properties.show', $property->id) }}" class="block text-indigo-600 hover:underline text-sm font-medium mt-2">
                            View Details →
                        </a>
                    </div>
                </div>
            @endforeach
        </div>

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