@extends('frontend.app')

@section('frontend_app')
<section>
    <div class="bg-[var(--coal-black)] w-full h-[400px] md:h-[500px] flex items-center justify-center relative">
        <img class="absolute inset-0 object-cover w-full h-full z-0 opacity-40"
            src="{{ asset('/' . $property['banner_img']) }}"
            alt="{{ $property['property_name'] }}">
        
        <div class="max-w-4xl mx-auto text-center px-4 md:px-10 lg:px-32 relative z-10">
            <h1 class="text-2xl md:text-3xl lg:text-4xl text-white font-bold mt-5">
                {{ $property['property_name'] }}
            </h1>
            <div class="mt-12 flex justify-center items-center space-x-1">
                <a draggable="false" href="{{ url('/') }}" class="text-base text-white font-semibold inline-flex items-center space-x-2 select-none">
                    <i class="fas fa-home text-base me-1 mr-1"></i>
                    Home
                </a>
                <svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 24 24"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="size-5 lucide lucide-chevron-right-icon">
                    <path d="m9 18 6-6-6-6"/>
                </svg>
                <span class="text-base font-medium line-clamp-1 text-white">{{ $property['property_name'] }}</span>
            </div>
        </div>
    </div>
</section>

<!----Start Left And Right section -->
<section class="py-12 bg-gray-100">
   <div class="container mx-auto px-4">
     <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 lg:grid-cols-[60%_40%] gap-8 items-start">
            <!-- Left: Image Slider -->
            <div class="">
                  <div class="img_slider">
                       @php
                            $images = collect($property['gallery_images'] ?? [])
                                ->pluck('image_path')
                                ->map(fn($img) => asset('/' . $img));
                        @endphp
                    <div 
                        x-data="{
                            images: {{ $images }},
                            currentIndex: 0,
                            interval: null,
                            get currentImage() {
                                return this.images[this.currentIndex]
                            },
                            startSlide() {
                                this.interval = setInterval(() => this.next(), 4000)
                            },
                            stopSlide() {
                                clearInterval(this.interval)
                            },
                            prev() {
                                this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length
                            },
                            next() {
                                this.currentIndex = (this.currentIndex + 1) % this.images.length
                            },
                            init() {
                                this.startSlide()
                            }
                        }"
                        x-init="init"
                        @mouseenter="stopSlide"
                        @mouseleave="startSlide"
                        class="relative w-full rounded-lg shadow overflow-hidden"
                    >
                        <!-- Main Image -->
                        <div class="relative">
                            <img :src="currentImage" alt="Property Image" class="w-full object-cover aspect-video transition duration-500 ease-in-out rounded">

                            <!-- Prev Button -->
                            <button @click="prev" class="absolute left-2 top-1/2 -translate-y-1/2 bg-black/40 text-white rounded-full p-2 hover:bg-black/60 z-10">
                                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                                </svg>
                            </button>

                            <!-- Next Button -->
                            <button @click="next" class="absolute right-2 top-1/2 -translate-y-1/2 bg-black/40 text-white rounded-full p-2 hover:bg-black/60 z-10">
                                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                                </svg>
                            </button>
                        </div>

                        <!-- Thumbnails -->
                        <div class="absolute bottom-4 left-4 flex space-x-2 bg-black/10 p-2 rounded-md backdrop-blur-sm">
                            <template x-for="(img, index) in images" :key="index">
                                <img 
                                    :src="img" 
                                    @click="currentIndex = index"
                                    :class="{
                                        'ring-1 ring-[var(--primary-color)] scale-105': currentIndex === index,
                                        'opacity-65': currentIndex !== index
                                    }"
                                    class="w-20 h-12 object-cover rounded border-1 border-white bg-white shadow cursor-pointer transition duration-300 ease-in-out hover:scale-105"
                                    alt="Thumbnail"
                                >
                            </template>
                        </div>
                    </div>
                 </div>
                    
                    @php
                        $detail = $property['detail'] ?? [];

                        // Only these keys will be shown
                        $selectedKeys = ['property_size', 'bedrooms', 'bathroom', 'car_parking', 'year_built', 'property_status'];

                        // Labels and Icons for selected keys
                        $detailLabels = [
                            'property_size' => ['label' => 'Size (Sq Ft)', 'icon' => 'fa-ruler-combined'],
                            'bedrooms' => ['label' => 'Beds', 'icon' => 'fa-bed'],
                            'bathroom' => ['label' => 'Baths', 'icon' => 'fa-bath'],
                            'car_parking' => ['label' => 'Car Parking', 'icon' => 'fa-car'],
                            'year_built' => ['label' => 'Year Built', 'icon' => 'fa-calendar-alt'],
                            'property_status' => ['label' => 'Status', 'icon' => 'fa-info-circle'],
                        ];
                    @endphp

                    <section class="bg-white mt-8 p-6 rounded-lg shadow aos-init aos-animate" data-aos="fade-up">
                        <h2 class="text-xl font-semibold text-gray-800 mb-4">Overview</h2>
                        <ul class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4 text-center text-gray-600">
                            @foreach ($selectedKeys as $key)
                                @if (!empty($detail[$key]))
                                    <li>
                                        <i class="fas {{ $detailLabels[$key]['icon'] }} text-[var(--primary-color)] text-xl mb-1"></i>
                                        <span class="block font-semibold text-gray-800">
                                            {{ is_numeric($detail[$key]) ? number_format($detail[$key]) : ucfirst($detail[$key]) }}
                                        </span>
                                        {{ $detailLabels[$key]['label'] }}
                                    </li>
                                @endif
                            @endforeach
                        </ul>
                    </section>


                    <!--- Name, Price, Disc -->
                    <section class="bg-white p-6 mt-8 rounded-lg shadow aos-init aos-animate" data-aos="fade-up">
                        <h1 class="text-2xl font-semibold">
                            {{ $property['property_name'] ?? 'No Name Available' }}
                        </h1>

                        @if (!empty($property['price']))
                            <p class="text-[var(--primary-color)] text-2xl font-bold mt-3 mb-2 tracking-wide">
                                ₹{{ number_format($property['price']) }}
                            </p>
                        @else
                            <a href="#connect"
                            class="inline-block mt-3 px-5 py-2 text-white bg-[var(--primary-color)] hover:bg-opacity-90 rounded-full text-sm font-medium transition">
                                Get a Quote
                            </a>
                        @endif


                        @if (!empty($property['description']))
                            <p class="mt-4 text-gray-600">
                                {{ $property['description'] }}
                            </p>
                        @else
                            <p class="mt-4 text-gray-400 italic"></p>
                        @endif
                    </section>

                    <!---Property Facts--->
                    @php
                        $detail = $property['detail'] ?? [];

                        // Define a mapping of labels and icons
                        $detailLabels = [
                            'property_size' => ['label' => 'Size (Sq Ft)', 'icon' => 'fa-ruler-combined'],
                            'bedrooms' => ['label' => 'Beds', 'icon' => 'fa-bed'],
                            'bathroom' => ['label' => 'Baths', 'icon' => 'fa-bath'],
                            'kitchen' => ['label' => 'Kitchens', 'icon' => 'fa-utensils'],
                            'dining_area' => ['label' => 'Dining Areas', 'icon' => 'fa-chair'],
                            'balkani' => ['label' => 'Balconies', 'icon' => 'fa-building'],
                            'car_parking' => ['label' => 'Car Parking', 'icon' => 'fa-car'],
                            'garage' => ['label' => 'Garage', 'icon' => 'fa-warehouse'],
                            'garage_size' => ['label' => 'Garage Size', 'icon' => 'fa-expand'],
                            'year_built' => ['label' => 'Year Built', 'icon' => 'fa-calendar-alt'],
                            'property_type' => ['label' => 'Property Type', 'icon' => 'fa-list'],
                            'property_status' => ['label' => 'Status', 'icon' => 'fa-info-circle'],
                            'furnishing' => ['label' => 'Furnishing', 'icon' => 'fa-couch'],
                            'total_floors' => ['label' => 'Total Floors', 'icon' => 'fa-layer-group'],
                            'maintenance_monthly' => ['label' => 'Monthly Maintenance', 'icon' => 'fa-hand-holding-usd'],
                            'floor_no' => ['label' => 'Floor No.', 'icon' => 'fa-sort-numeric-up'],
                            'facing' => ['label' => 'Facing', 'icon' => 'fa-compass'],
                            'project_name' => ['label' => 'Project Name', 'icon' => 'fa-building-circle-check'],
                        ];
                    @endphp

                    @if(collect($detail)->filter(fn($v) => !is_null($v))->isNotEmpty())
                        <section class="bg-white mt-8 p-6 rounded-lg shadow" data-aos="fade-up">
                            <h2 class="text-xl font-semibold text-gray-800 mb-4">Details</h2>
                            <ul class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 text-gray-600">
                                @foreach ($detail as $key => $value)
                                    @if (!is_null($value) && isset($detailLabels[$key]))
                                        <li class="border border-gray-200 py-4 px-4 rounded-md flex flex-col items-center text-center space-y-2">
                                            <i class="fas {{ $detailLabels[$key]['icon'] }} text-[30px] text-[var(--primary-color)]"></i>
                                            <span class="font-semibold text-gray-800 px-2 text-[15px] leading-snug break-words">
                                                {{ is_numeric($value) ? number_format($value) : ucfirst($value) }}
                                            </span>
                                            <span class="text-sm text-gray-500 break-words leading-tight">
                                                {{ $detailLabels[$key]['label'] }}
                                            </span>
                                        </li>
                                    @endif
                                @endforeach
                            </ul>
                        </section>
                    @endif

                    <!--- Features --> 
                    @php
                        $amenities = $property['amenities'] ?? [];

                        $amenityMap = [
                            'gym' => ['title' => 'Gymnasium', 'icon' => 'image-9nfkO2yI0lvKCl7Any15roC9jEeLKX.png'],
                            'spa' => ['title' => 'Spa', 'icon' => 'image-bkdUNYIhdtrWnm5wKkRmKHaRfiGOAx.png'],
                            'security_24x7' => ['title' => '24*7 Security', 'icon' => 'image-Ol6oQuDeqEhzwyzfhzccWv2FCD44G4.png'],
                            'premium_lifts' => ['title' => 'Premium Lifts', 'icon' => 'image-zsKq5p4J7E4KR9vkfrUbguTQRrlpj2.png'],
                            'cctv_surveillance' => ['title' => 'CCTV Surveillance', 'icon' => 'image-74phE0rsFJmY4aKzmdUvRKmJA6g5qh.png'],
                            'club_house' => ['title' => 'Club House', 'icon' => 'image-plZhLyp90is2n1c2ITq2ctEi9xptnN.png'],
                            'mivan_construction' => ['title' => 'Mivan Construction', 'icon' => 'image-2yMisNpt0ZmQzJ5pYzAndqBGAYkfX3.png'],
                            'jogging_track' => ['title' => 'Jogging Track', 'icon' => 'image-PlAC2aGjB0ug6NOw7ygDhsthkUTCQf.png'],
                            'rainwater_harvesting' => ['title' => 'Rain water Harvesting', 'icon' => 'image-inOTwhUDmvqczVKngUTWNFGFlijuuW.png'],
                            'power_backup' => ['title' => 'Power Backup', 'icon' => 'image-IvbgeSvAiNMAXA18AcC7azkFwnT1tJ.png'],
                            'water_supply_24x7' => ['title' => '24*7 Water Supply', 'icon' => 'image-WlsBsv5aOMu1Oi7rXAIHXYHGNSxMpb.png'],
                            'swimming_area' => ['title' => 'Swimming Area', 'icon' => 'image-a7Qf2mhjWfBqXCLELPt5nDl9abLexo.png'],
                            'kids_play_area' => ['title' => 'Kid’s Play Area', 'icon' => 'image-pC8JYVWBiVup8KLut2FAWF2wkiFiO1.png'],
                            'yoga_area' => ['title' => 'Yoga Area', 'icon' => 'image-spb3uhz3h6K3kGJmdOjQk8YmbPG4u2.png'],
                            'barbeque_area' => ['title' => 'Barbeque Area', 'icon' => 'image-BAUryvk7UP19qEFwXfAb7K4K4g7cGD.png'],
                            'co_working_space' => ['title' => 'Co-working Space', 'icon' => 'image-lRbpg8oTjmaqBgWDr4lfslf9vaE6u9.png'],
                            'gated_secured_homes' => ['title' => 'Gated Secured Homes', 'icon' => 'image-pRP1oHkLZ62PuUfEw6hFy89q0jtW1D.png'],
                            'basketball_court' => ['title' => 'Basket Ball Court', 'icon' => 'image-FE96U2EqvCUOinHwWHgi4KWnZB8cVX.png'],
                            'badminton_court' => ['title' => 'Badminton Court', 'icon' => 'image-8VE8ERPz4yLSAu2vC1I5JyWYT5Jpb8.png'],
                            'table_tennis' => ['title' => 'Table Tennis', 'icon' => 'image-q4Z6lntCoBJx9Cb7yxBRWIuIICwJXz.png'],
                            'tennis_court' => ['title' => 'Tennis Court', 'icon' => 'image-vTpKjUtDJpYw6Cf6NVhYO2R4Hkf2hi.png'],
                            'restaurant_bar' => ['title' => 'Restaurant & Bar', 'icon' => 'image-hRETElBXDrcXOu32Vv4OnRgHpWQZj3.png'],
                            'meditation_area' => ['title' => 'Meditation Area', 'icon' => 'image-S524q7roYEGQWbVIWrdw3sOow08S8h.png'],
                            'spacious_parking' => ['title' => 'Spacious Stilt Parking', 'icon' => 'image-VIqCIvrb6BPM7qPvjaVtf9HbOZ5tfy.png'],
                            'multipurpose_hall' => ['title' => 'Multipurpose Hall', 'icon' => 'image-HY3PHb2c7mv0M9dAZxTCVtdsBKnKWY.png'],
                            'fire_protection' => ['title' => 'Fire Protection', 'icon' => 'image-kp322YLwT8QiEpBaqVJOg1rOOvw7Tm.png'],
                            'library' => ['title' => 'Library', 'icon' => 'image-SKuCQpYircIfGJMWJtbDuNLim16vmo.png'],
                            'mini_theatre' => ['title' => 'Mini Theatre', 'icon' => 'image-FhiwQkj637pAu5NJHPzohktWSdgiVS.png'],
                            'garden_park' => ['title' => 'Garden / Park', 'icon' => 'image-ezRAh56lqxxJuBTr37Vpz7gdOP0aE9.png'],
                        ];

                        $imageBaseUrl = 'https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2F';
                    @endphp
                    
                    
                    @php
                        $hasAmenities = false;
                        foreach ($amenities as $key => $enabled) {
                            if ($enabled && isset($amenityMap[$key])) {
                                $hasAmenities = true;
                                break;
                            }
                        }
                    @endphp
                    @if ($hasAmenities)
                        <section class="bg-white p-6 mt-8 rounded-lg shadow aos-init aos-animate" data-aos="fade-up">
                            <h2 class="text-xl font-semibold mb-4">Features & Amenities</h2>
                            <ul class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-6 text-center text-gray-600">
                                @foreach ($amenities as $key => $enabled)
                                    @if ($enabled && isset($amenityMap[$key]))
                                        @php
                                            $item = $amenityMap[$key];
                                            $iconUrl = $imageBaseUrl . $item['icon'] . '&w=1920&q=75';
                                        @endphp
                                        <li class="flex flex-col items-center">
                                            <img src="{{ $iconUrl }}" class="mx-auto mb-1 size-10 md:size-12 lg:size-14 object-contain" alt="Icon">
                                            <span class="text-sm md:text-base">{{ $item['title'] }}</span>
                                        </li>
                                    @endif
                                @endforeach
                            </ul>
                        </section>
                    @endif
                    <!--- Adress here---> 
                    @php
                        $address = $property['address'] ?? [];
                        $fullAddress = trim("{$address['street']}, {$address['area']}, {$address['city']}, {$address['state']}, {$address['country']} - {$address['zip_or_postal_code']}");
                        $encodedAddress = urlencode($fullAddress);
                    @endphp

                    <section class="bg-white p-6 mt-8 rounded-lg shadow aos-init aos-animate" data-aos="fade-up">
                        <h2 class="text-xl font-semibold mb-4 flex items-center gap-2">
                            Location
                        </h2>
                        <p class="mb-4">
                            <i class="fas fa-location-dot text-[var(--primary-color)]"></i>
                            <span id="propertyAddress" class="text-gray-700">
                                {{ $fullAddress }}
                            </span>
                        </p>

                        <div class="w-full h-64 rounded overflow-hidden">
                               @php
                                $address = $property['address'] ?? [];
                                $fullAddress = implode(', ', array_filter([
                                    $address['street'] ?? '',
                                    $address['area'] ?? '',
                                    $address['city'] ?? '',
                                    $address['state'] ?? '',
                                    $address['zip_or_postal_code'] ?? '',
                                    $address['country'] ?? ''
                                ]));
                                $mapUrl = 'https://www.google.com/maps?q=' . urlencode($fullAddress) . '&output=embed';
                                @endphp

                                <iframe
                                    width="100%"
                                    height="300"
                                    style="border:0"
                                    loading="lazy"
                                    allowfullscreen
                                    referrerpolicy="no-referrer-when-downgrade"
                                    src="{{ $mapUrl }}">
                                </iframe>
                         </div>
                    </section>
                    <!---Youtube videos---> 
                   @php
                        $youtubeUrl = $property['youtube_url'] ?? null;
                        $embedUrl = null;

                        if ($youtubeUrl) {
                            if (Str::contains($youtubeUrl, 'youtube.com/embed') || Str::contains($youtubeUrl, 'youtu.be')) {
                                if (Str::contains($youtubeUrl, 'youtu.be')) {
                                    $videoId = substr(parse_url($youtubeUrl, PHP_URL_PATH), 1);
                                    $embedUrl = 'https://www.youtube.com/embed/' . $videoId;
                                } else {
                                    $embedUrl = $youtubeUrl;
                                }
                            } elseif (preg_match('/(?:v=|\/v\/|embed\/)([a-zA-Z0-9_\-]+)/', $youtubeUrl, $matches)) {
                                $videoId = $matches[1];
                                $embedUrl = 'https://www.youtube.com/embed/' . $videoId;
                            }

                            // Add autoplay, mute, etc.
                            if ($embedUrl) {
                                $embedUrl .= '?autoplay=1&mute=1&rel=0&controls=1&playsinline=1';
                            }
                        }
                    @endphp

                    @if ($embedUrl)
                        <section class="bg-white p-6 mt-8 rounded-lg shadow aos-init aos-animate" data-aos="fade-up">
                            <h2 class="text-xl font-semibold mb-4">Property Tour</h2>
                            <div class="w-full aspect-video rounded overflow-hidden">
                                <iframe 
                                    id="propertyVideo"
                                    src="{{ $embedUrl }}"
                                    title="Video Tour"
                                    allow="autoplay; encrypted-media; clipboard-write; gyroscope; picture-in-picture"
                                    allowfullscreen
                                    class="w-full h-full border-0 rounded">
                                </iframe>
                            </div>
                        </section>
                    @endif

                    @if (!empty($property['floor_plans']) && count($property['floor_plans']) > 0)
                     <section class="bg-white p-6 mt-8 rounded-lg shadow aos-init aos-animate" data-aos="fade-up">
                        <div>
                            <h2 class="text-xl font-semibold mb-4">Floor Plans</h2>

                            @php
                                $floorImages = collect($property['floor_plans'])->pluck('image_path')->map(fn($img) => asset('/' . $img));
                            @endphp

                            @if ($floorImages->count() === 1)
                                <!-- Single Image (No Slider) -->
                                <img src="{{ $floorImages->first() }}" alt="Floor Plan" class="w-full max-w-3xl mx-auto rounded shadow">
                            @else
                        <!-- Slider for Multiple Floor Plan Images -->
                        <div 
                            x-data="{
                                images: {{ $floorImages }},
                                currentIndex: 0,
                                interval: null,
                                get currentImage() {
                                    return this.images[this.currentIndex]
                                },
                                startSlide() {
                                    this.interval = setInterval(() => this.next(), 4000)
                                },
                                stopSlide() {
                                    clearInterval(this.interval)
                                },
                                prev() {
                                    this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length
                                },
                                next() {
                                    this.currentIndex = (this.currentIndex + 1) % this.images.length
                                },
                                init() {
                                    this.startSlide()
                                }
                            }"
                            x-init="init"
                            @mouseenter="stopSlide"
                            @mouseleave="startSlide"
                            class="relative w-full max-w-3xl mx-auto rounded-lg shadow overflow-hidden"
                        >
                            <!-- Main Image -->
                            <div class="relative">
                                <img :src="currentImage" alt="Floor Plan" class="w-full object-cover aspect-video transition duration-500 ease-in-out rounded">

                                <!-- Prev Button -->
                                <button @click="prev" class="absolute left-2 top-1/2 -translate-y-1/2 bg-black/40 text-white rounded-full p-2 hover:bg-black/60 z-10">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                                    </svg>
                                </button>

                                <!-- Next Button -->
                                <button @click="next" class="absolute right-2 top-1/2 -translate-y-1/2 bg-black/40 text-white rounded-full p-2 hover:bg-black/60 z-10">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                                    </svg>
                                </button>
                            </div>

                            <!-- Thumbnails -->
                            <div class="absolute bottom-4 left-4 flex space-x-2 bg-black/10 p-2 rounded-md backdrop-blur-sm">
                                <template x-for="(img, index) in images" :key="index">
                                    <img 
                                        :src="img" 
                                        @click="currentIndex = index"
                                        :class="{
                                            'ring-1 ring-[var(--primary-color)] scale-105': currentIndex === index,
                                            'opacity-65': currentIndex !== index
                                        }"
                                        class="w-20 h-12 object-cover rounded border-1 border-white bg-white shadow cursor-pointer transition duration-300 ease-in-out hover:scale-105"
                                        alt="Thumbnail"
                                    >
                                </template>
                            </div>
                        </div>
                    @endif
                </div>
             </section>
            @endif

           <!--- Also Like Same Property --> 
            @if (!empty($similarProperties) && count($similarProperties) > 1)
                <section class="bg-white p-6 mt-8 rounded-lg shadow mb-12 aos-init aos-animate" data-aos="fade-up">
                    <div class="max-w-6xl mx-auto px-4">
                        <h2 class="text-xl font-semibold mb-6">You May Also Like</h2>
                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                            @foreach ($similarProperties as $item)
                                <a href="{{ route('property.details', ['category' => $category, 'slug' => $item['slug']]) }}" class="block group">
                                    <div class="bg-gray-50 rounded-lg overflow-hidden shadow hover:shadow-md transition">
                                        <img src="{{ asset('storage/' . ($item['banner_img'] ?? 'default.jpg')) }}"
                                            alt="{{ $item['property_name'] }}"
                                            class="w-full h-36 object-cover group-hover:scale-105 transition-transform duration-300">
                                        <div class="p-4">
                                            <h3 class="font-semibold text-lg">{{ $item['property_name'] }}</h3>
                                            <p class="text-sm text-gray-600">
                                                ₹{{ number_format($item['price']) }} 
                                                · {{ $item['detail']['bedrooms'] ?? '0' }} bed
                                                · {{ $item['detail']['bathrooms'] ?? '0' }} bath
                                            </p>
                                        </div>
                                    </div>
                                </a>
                            @endforeach
                        </div>
                    </div>
                </section>
            @endif

            </div>
            <!-- Right: Contact Form -->
            <div class="w-full p-6 pt-0 top-20 sticky">
              <div class="bg-white p-6 rounded-lg shadow-lg w-full max-w-2xl mx-auto">
                <h2 class="text-2xl font-bold text-gray-800 mb-2 text-center">Contact Agent</h2>
                @if(session('success'))
                    <div class="bg-green-100 text-green-700 p-3 rounded mb-1">
                        {{ session('success') }}
                    </div>
                @endif
                 <form action="{{ route('contact.store') }}" method="POST" class="space-y-6">
                    <!-- Name -->
                        @csrf

                        {{-- Hidden fields --}}
                            <input type="hidden" name="property_name" value="{{ $property['property_name'] }}">
                            <input type="hidden" name="title" value="{{ trim($__env->yieldContent('title')) }}">
                    <div>
                        <input type="text" id="name" name="name" placeholder="John Doe"
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition" required>
                    </div>

                    <!-- Email -->
                    <div>
                        <input type="email" id="email" name="email" placeholder="john@example.com"
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition" required>
                    </div>

                    <!-- Phone Number -->
                    <div>
                        <input type="tel" id="number" name="number" placeholder="+91 9876543210"
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
                    </div>

                    <!-- Submit -->
                    <div>
                        <button type="submit"
                            class="text-sm md:text-base inline-flex items-center justify-center gap-x-2 bg-[var(--primary-color)] text-white px-6 py-3 rounded-md focus:outline-none hover:scale-95 transition-all duration-200">
                            Send Message
                        </button>
                    </div>
                  </form>
                </div>
            </div>
        </div>
    </div>
   </div>
</section>
@endsection