@extends('layouts.app')

@section('title', $property->title . ' - Frantyapp Real Estate')
@section('meta_description', Str::limit(strip_tags($property->description), 155))

@section('content')
<div x-data="{ activeImage: '{{ asset($property->images[0] ?? "assets/properties/default.jpg") }}', viewingModalOpen: false }">

    <!-- Header Section -->
    <div class="bg-black text-white py-12 border-b border-neutral-800">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center space-x-2 text-[10px] font-bold uppercase tracking-widest text-gray-400 mb-3">
                <a href="{{ route('home') }}" class="hover:text-white">Home</a>
                <span>/</span>
                <a href="{{ route('properties.index') }}" class="hover:text-white">Properties</a>
                <span>/</span>
                <span class="text-white font-bold">{{ $property->property_type }}</span>
            </div>
            
            <div class="flex flex-col md:flex-row md:items-end justify-between gap-4">
                <div>
                    <h1 class="font-serif-heading font-extrabold text-3xl sm:text-5xl text-white">{{ $property->title }}</h1>
                    <p class="text-gray-400 text-sm mt-2 flex items-center font-light">
                        <i class="fa-solid fa-location-dot text-brand-blue mr-2"></i>
                        <span>{{ $property->address }}, {{ $property->city }}, {{ $property->state }}</span>
                    </p>
                </div>
                <div class="text-left md:text-right">
                    <span class="text-[10px] font-bold uppercase tracking-widest text-gray-400 block">Offered At</span>
                    <span class="font-serif-heading font-extrabold text-3xl sm:text-4xl text-white">₦{{ number_format($property->price, 0) }}</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content Container -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-12">
            
            <!-- Left Gallery & Overview -->
            <div class="lg:col-span-8 space-y-10">
                
                <!-- Main Image Box -->
                <div class="border border-gray-200 p-3 bg-white space-y-3">
                    <div class="relative h-[400px] sm:h-[500px] overflow-hidden bg-black">
                        <img :src="activeImage" alt="{{ $property->title }}" class="w-full h-full object-cover transition-all duration-300">
                        <div class="absolute top-4 left-4 flex space-x-2">
                            <span class="px-3 py-1 bg-black text-white text-[10px] font-bold uppercase tracking-widest">
                                For {{ $property->status }}
                            </span>
                            <span class="px-3 py-1 bg-white text-black text-[10px] font-bold uppercase tracking-widest border border-gray-200">
                                {{ $property->property_type }}
                            </span>
                        </div>
                    </div>

                    <!-- Thumbnails Carousel -->
                    @if(is_array($property->images) && count($property->images) > 1)
                        <div class="flex space-x-3 overflow-x-auto pb-2">
                            @foreach($property->images as $img)
                                <button type="button" @click="activeImage = '{{ asset($img) }}'" class="relative h-20 w-28 flex-shrink-0 border-2 transition-all" :class="activeImage === '{{ asset($img) }}' ? 'border-black opacity-100' : 'border-transparent opacity-60 hover:opacity-100'">
                                    <img src="{{ asset($img) }}" alt="Property Thumbnail" class="w-full h-full object-cover">
                                </button>
                            @endforeach
                        </div>
                    @endif
                </div>

                <!-- Key Specs & Trust Verification Grid -->
                <div class="border border-gray-200 p-6 bg-white space-y-4">
                    <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 text-center divide-x divide-gray-100">
                        <div>
                            <span class="text-[10px] font-bold uppercase tracking-widest text-gray-400 block">Bedrooms</span>
                            <span class="font-serif-heading font-bold text-2xl text-black block mt-1">{{ $property->bedrooms ?? 0 }}</span>
                        </div>
                        <div>
                            <span class="text-[10px] font-bold uppercase tracking-widest text-gray-400 block">Bathrooms</span>
                            <span class="font-serif-heading font-bold text-2xl text-black block mt-1">{{ $property->bathrooms ?? 0 }}</span>
                        </div>
                        <div>
                            <span class="text-[10px] font-bold uppercase tracking-widest text-gray-400 block">Area (sqm)</span>
                            <span class="font-serif-heading font-bold text-2xl text-black block mt-1">{{ $property->sqft ?? 0 }}</span>
                        </div>
                        <div>
                            <span class="text-[10px] font-bold uppercase tracking-widest text-gray-400 block">Land Title</span>
                            <span class="font-serif-heading font-bold text-xs text-black block mt-2 truncate px-1">{{ $property->title_document ?? 'C of O Verified' }}</span>
                        </div>
                    </div>

                    <!-- Authentic Nigerian Trust Badges -->
                    <div class="pt-4 border-t border-gray-100 flex flex-wrap items-center gap-2">
                        <span class="px-2.5 py-1 bg-green-50 text-green-800 border border-green-200 text-[10px] font-bold uppercase tracking-wider flex items-center">
                            <i class="fa-solid fa-shield-check mr-1.5 text-green-600"></i> AGIS Title Search Verified
                        </span>
                        <span class="px-2.5 py-1 bg-blue-50 text-blue-800 border border-blue-200 text-[10px] font-bold uppercase tracking-wider flex items-center">
                            <i class="fa-solid fa-file-contract mr-1.5 text-blue-600"></i> {{ $property->title_document ?? 'FCDA Allocation' }}
                        </span>
                        <span class="px-2.5 py-1 bg-amber-50 text-amber-800 border border-amber-200 text-[10px] font-bold uppercase tracking-wider flex items-center">
                            <i class="fa-solid fa-handshake mr-1.5 text-amber-600"></i> Direct Brief
                        </span>
                        <span class="px-2.5 py-1 bg-gray-100 text-gray-800 border border-gray-200 text-[10px] font-bold uppercase tracking-wider flex items-center">
                            <i class="fa-solid fa-compass-drafting mr-1.5 text-gray-600"></i> Instant Plot Allocation
                        </span>
                    </div>
                </div>

                <!-- Description Section -->
                <div class="border border-gray-200 p-8 bg-white space-y-4">
                    <h3 class="font-serif-heading font-bold text-2xl text-black border-b border-gray-100 pb-3">Property Overview</h3>
                    <p class="text-gray-700 text-base leading-relaxed font-light whitespace-pre-line">{{ $property->description }}</p>
                </div>

                <!-- Features & Infrastructure -->
                @if(is_array($property->features) && count($property->features) > 0)
                    <div class="border border-gray-200 p-8 bg-white space-y-6">
                        <h3 class="font-serif-heading font-bold text-2xl text-black border-b border-gray-100 pb-3">Amenities and Security Features</h3>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            @foreach($property->features as $feature)
                                <div class="flex items-center space-x-3 p-3 bg-gray-50 border border-gray-100 text-xs font-semibold text-gray-800">
                                    <i class="fa-solid fa-check text-brand-blue text-sm"></i>
                                    <span>{{ $feature }}</span>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif

            </div>

            <!-- Right Sidebar Contact & Inspection -->
            <div class="lg:col-span-4 space-y-8">
                
                <div class="border border-gray-200 p-6 bg-white sticky top-24 space-y-6 shadow-xl">
                    
                    <!-- Inspection Booking Button -->
                    <button type="button" @click="viewingModalOpen = true" class="w-full py-4 bg-black text-white text-xs font-bold uppercase tracking-[0.2em] hover:bg-neutral-800 transition-colors flex items-center justify-center space-x-2">
                        <i class="fa-solid fa-calendar-check text-white"></i>
                        <span>Book Physical Inspection</span>
                    </button>

                    <!-- Smart Pre-Filled WhatsApp Advisor Link -->
                    <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $property->agent->whatsapp ?? '2349126262525') }}?text={{ urlencode('Hi ' . ($property->agent->name ?? 'Advisor') . ', I am interested in inspecting ' . $property->title . ' listed for ₦' . number_format($property->price, 0) . ' in ' . $property->city . '. Please confirm inspection schedule.') }}" 
                       target="_blank" 
                       class="w-full py-3.5 bg-emerald-700 text-white text-xs font-bold uppercase tracking-widest text-center block hover:bg-emerald-800 transition-colors shadow-md">
                        <i class="fa-brands fa-whatsapp mr-1.5 text-sm"></i> WhatsApp {{ $property->agent ? Str::words($property->agent->name, 1, '') : 'Advisor' }} Directly
                    </a>

                    <!-- AGIS Title Document Verification Action -->
                    <a href="https://wa.me/2349126262525?text={{ urlencode('Hello Frantyap Legal Team, I want to request AGIS title search verification details for property: ' . $property->title) }}" 
                       target="_blank"
                       class="w-full py-3 border border-neutral-300 text-neutral-800 text-[11px] font-bold uppercase tracking-wider text-center block hover:bg-neutral-50 transition-colors">
                        <i class="fa-solid fa-file-shield text-brand-blue mr-1.5"></i> Request AGIS Title Copy
                    </a>

                    <!-- Assigned Agent Profile Card -->
                    @if($property->agent)
                        <div class="pt-6 border-t border-gray-100">
                            <span class="text-[10px] font-bold uppercase tracking-widest text-gray-400 block mb-3">Listing Agent</span>
                            <div class="flex items-center space-x-4">
                                <img src="{{ asset($property->agent->photo) }}" alt="{{ $property->agent->name }}" class="w-14 h-14 rounded-none object-cover border border-gray-200">
                                <div>
                                    <h4 class="font-serif-heading font-bold text-base text-black">{{ $property->agent->name }}</h4>
                                    <span class="text-[10px] font-bold uppercase tracking-wider text-gray-500 block">{{ $property->agent->title }}</span>
                                    <a href="tel:{{ $property->agent->phone }}" class="text-xs text-gray-600 hover:text-black block mt-1"><i class="fa-solid fa-phone mr-1"></i> {{ $property->agent->phone }}</a>
                                </div>
                            </div>
                        </div>
                    @endif

                    <!-- Inquiry Form -->
                    <div class="pt-6 border-t border-gray-100">
                        <h4 class="font-serif-heading font-bold text-base text-black mb-3">Send Direct Inquiry</h4>
                        <form action="{{ route('properties.inquire', $property->id) }}" method="POST" class="space-y-3">
                            @csrf
                            <input type="text" name="name" required placeholder="Your Name" class="w-full px-4 py-2.5 bg-gray-50 border border-gray-200 text-xs font-medium focus:outline-none focus:border-black">
                            <input type="email" name="email" required placeholder="Your Email" class="w-full px-4 py-2.5 bg-gray-50 border border-gray-200 text-xs font-medium focus:outline-none focus:border-black">
                            <input type="tel" name="phone" required placeholder="Phone Number" class="w-full px-4 py-2.5 bg-gray-50 border border-gray-200 text-xs font-medium focus:outline-none focus:border-black">
                            <textarea name="message" rows="3" required placeholder="Your message or inquiry..." class="w-full px-4 py-2.5 bg-gray-50 border border-gray-200 text-xs font-medium focus:outline-none focus:border-black"></textarea>
                            <button type="submit" class="w-full py-3 bg-neutral-900 text-white text-xs font-bold uppercase tracking-widest hover:bg-black transition-colors">
                                Send Message
                            </button>
                        </form>
                    </div>

                </div>

            </div>

        </div>
    </div>

    <!-- Booking Inspection Modal -->
    <div x-show="viewingModalOpen" x-transition class="fixed inset-0 z-50 overflow-y-auto bg-black/80 backdrop-blur-sm flex items-center justify-center p-4">
        <div class="bg-white max-w-lg w-full p-8 border border-gray-200 shadow-2xl relative">
            <button @click="viewingModalOpen = false" class="absolute top-6 right-6 text-gray-400 hover:text-black text-2xl font-bold">
                <i class="fa-solid fa-xmark"></i>
            </button>

            <div class="mb-6">
                <span class="text-[10px] font-bold uppercase tracking-[0.2em] text-brand-blue">Physical Visit</span>
                <h3 class="font-serif-heading font-extrabold text-2xl text-black mt-1">Schedule Inspection</h3>
                <p class="text-xs text-gray-500 mt-1">Book a guided property inspection for <strong>{{ $property->title }}</strong>.</p>
            </div>

            <form action="{{ route('properties.book-viewing', $property->id) }}" method="POST" class="space-y-4">
                @csrf
                <div>
                    <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1">Your Name</label>
                    <input type="text" name="name" required class="w-full px-4 py-2.5 bg-gray-50 border border-gray-200 text-xs">
                </div>
                
                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1">Email</label>
                        <input type="email" name="email" required class="w-full px-4 py-2.5 bg-gray-50 border border-gray-200 text-xs">
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1">Phone / WhatsApp</label>
                        <input type="tel" name="phone" required class="w-full px-4 py-2.5 bg-gray-50 border border-gray-200 text-xs">
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1">Preferred Date</label>
                        <input type="date" name="preferred_date" min="{{ date('Y-m-d') }}" required class="w-full px-4 py-2.5 bg-gray-50 border border-gray-200 text-xs">
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1">Preferred Time</label>
                        <select name="preferred_time" required class="w-full px-4 py-2.5 bg-gray-50 border border-gray-200 text-xs">
                            <option value="10:00 AM">10:00 AM</option>
                            <option value="12:00 PM">12:00 PM</option>
                            <option value="02:00 PM">02:00 PM</option>
                            <option value="04:00 PM">04:00 PM</option>
                        </select>
                    </div>
                </div>

                <div>
                    <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1">Notes</label>
                    <textarea name="notes" rows="2" placeholder="Transportation requirements or meeting notes..." class="w-full px-4 py-2.5 bg-gray-50 border border-gray-200 text-xs"></textarea>
                </div>

                <button type="submit" class="w-full py-3.5 bg-black text-white text-xs font-bold uppercase tracking-[0.2em] hover:bg-neutral-800 transition-colors">
                    Confirm Inspection
                </button>
            </form>
        </div>
    </div>

</div>
@endsection
