{{--
    AJAX Partial: Modal Content
    Variables: $property (PropertyData), $detail (PropertyDetail|null), $images (Collection)
--}}

@php
    $op = strtolower($property->operation ?? '');
    $showSaleStatus = str_contains($op, 'sale');
    $showRentStatus = str_contains($op, 'rent');

    $getIcon = function ($name) {
        $name = strtolower($name);
        if (str_contains($name, 'solar') || str_contains($name, 'heater')) {
            return '<svg class="h-5 w-5 text-slate-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364-6.364l-.707.707M6.343 17.657l-.707.707m0-12.728l.707.707m12.728 12.728l.707-.707M12 8a4 4 0 100 8 4 4 0 000-8z" /></svg>';
        }
        if (str_contains($name, 'purifier') || str_contains($name, 'water')) {
            return '<svg class="h-5 w-5 text-slate-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" /></svg>';
        }
        if (str_contains($name, 'temple')) {
            return '<svg class="h-5 w-5 text-slate-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /></svg>';
        }
        if (str_contains($name, 'club') || str_contains($name, 'house')) {
            return '<svg class="h-5 w-5 text-slate-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /></svg>';
        }
        if (str_contains($name, 'garden') || str_contains($name, 'park') || str_contains($name, 'lawn')) {
            return '<svg class="h-5 w-5 text-slate-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" /></svg>';
        }
        if (str_contains($name, 'floor')) {
            return '<svg class="h-5 w-5 text-slate-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /></svg>';
        }
        if (str_contains($name, 'apartent') || str_contains($name, 'apartment')) {
            return '<svg class="h-5 w-5 text-slate-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" /></svg>';
        }
        if (str_contains($name, 'bathroom') || str_contains($name, 'bath')) {
            return '<svg class="h-5 w-5 text-slate-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 1121.75 11H9.812a5.002 5.002 0 01-4.75-3.5L4 4" /></svg>';
        }
        if (str_contains($name, 'living') || str_contains($name, 'room') || str_contains($name, 'hall')) {
            return '<svg class="h-5 w-5 text-slate-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z" /></svg>';
        }
        if (str_contains($name, 'color') || str_contains($name, 'paint')) {
            return '<svg class="h-5 w-5 text-slate-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" /></svg>';
        }
        if (str_contains($name, 'roof') || str_contains($name, 'ceiling')) {
            return '<svg class="h-5 w-5 text-slate-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7M5 9l7-7 7 7" /></svg>';
        }
        // Fallback
        return '<svg class="h-5 w-5 text-slate-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>';
    };
@endphp

{{-- Title + Badges + Address at the top --}}
<div class="p-6 bg-white dark:bg-card border-b border-border">
    {{-- Badges --}}
    <div class="mb-2 flex flex-wrap gap-1.5">
        @if ($property->property_type)
            <span
                class="inline-flex items-center rounded bg-emerald-50 border border-emerald-200 px-2.5 py-0.5 text-xs font-semibold text-emerald-700 uppercase tracking-wide">
                {{ $property->property_type }}
            </span>
        @endif
        @if (str_contains(strtolower($property->operation ?? ''), 'rent'))
            <span
                class="inline-flex items-center rounded bg-blue-600 px-2.5 py-0.5 text-xs font-semibold text-white uppercase tracking-wide">For
                Rent</span>
        @endif
        @if (str_contains(strtolower($property->operation ?? ''), 'sale'))
            <span
                class="inline-flex items-center rounded bg-emerald-600 px-2.5 py-0.5 text-xs font-semibold text-white uppercase tracking-wide">For
                Sale</span>
        @endif
        @if ($showSaleStatus && $property->property_sale_status)
            <span
                class="inline-flex items-center rounded bg-amber-50 border border-amber-200 px-2.5 py-0.5 text-xs font-semibold text-amber-700 uppercase tracking-wide">
                Sale: {{ $property->property_sale_status }}
            </span>
        @endif
        @if ($showRentStatus && $property->property_rent_status)
            <span
                class="inline-flex items-center rounded bg-blue-50 border border-blue-200 px-2.5 py-0.5 text-xs font-semibold text-blue-700 uppercase tracking-wide">
                Rent: {{ $property->property_rent_status }}
            </span>
        @endif
    </div>

    {{-- Title --}}
    <h3 class="text-xl font-bold text-foreground leading-snug">{{ $property->property_title ?: 'Untitled Property' }}
    </h3>

    {{-- Location --}}
    <p class="mt-1.5 text-xs text-muted-foreground flex items-center gap-1">
        <x-heroicon-o-map-pin class="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
        {{ implode(', ', array_filter([$property->full_address, $property->city, $property->state, $property->postal_code])) }}
    </p>
</div>

{{-- Two Columns Grid --}}
<div class="p-6 bg-slate-50/50 dark:bg-slate-950/20 grid grid-cols-1 md:grid-cols-5 gap-8">

    {{-- Left Column (spans 3) --}}
    <div class="md:col-span-3 space-y-6">

        {{-- Image Carousel --}}
        @if ($images->isNotEmpty())
            <div class="relative overflow-hidden bg-muted rounded-2xl border border-border shadow-sm aspect-video">
                <div id="de-carousel-track" class="relative w-full h-full">
                    @foreach ($images as $index => $image)
                        <div class="de-carousel-slide absolute inset-0 transition-opacity duration-300 w-full h-full"
                            :class="carouselIndex === {{ $index }} ? 'opacity-100 z-10' : 'opacity-0 z-0'">
                            <img src="{{ $image->image_url }}" alt="Property image {{ $index + 1 }}"
                                class="h-full w-full object-cover" loading="{{ $index === 0 ? 'eager' : 'lazy' }}" />
                        </div>
                    @endforeach
                </div>

                @if ($images->count() > 1)
                    {{-- Prev/Next controls --}}
                    <button type="button" @click="prevSlide()"
                        class="absolute start-3 top-1/2 z-20 -translate-y-1/2 flex h-8 w-8 items-center justify-center rounded-full bg-black/40 text-white backdrop-blur-sm transition-all hover:bg-black/60 shadow-lg"
                        aria-label="Previous image">
                        <x-heroicon-o-chevron-left class="h-4.5 w-4.5" />
                    </button>
                    <button type="button" @click="nextSlide()"
                        class="absolute end-3 top-1/2 z-20 -translate-y-1/2 flex h-8 w-8 items-center justify-center rounded-full bg-black/40 text-white backdrop-blur-sm transition-all hover:bg-black/60 shadow-lg"
                        aria-label="Next image">
                        <x-heroicon-o-chevron-right class="h-4.5 w-4.5" />
                    </button>

                    {{-- Counter --}}
                    <div
                        class="absolute end-4 bottom-4 z-20 rounded-full bg-black/40 px-2.5 py-0.5 text-xs text-white backdrop-blur-sm font-semibold">
                        <span x-text="carouselIndex + 1"></span>/{{ $images->count() }}
                    </div>
                @endif
            </div>
        @else
            <div class="flex h-48 items-center justify-center bg-muted rounded-2xl border border-border">
                <div class="text-center text-muted-foreground">
                    <x-heroicon-o-home class="mx-auto h-12 w-12 opacity-30" />
                    <p class="mt-2 text-sm">No images available</p>
                </div>
            </div>
        @endif

        {{-- Key Stats Cards --}}
        <div class="grid grid-cols-3 gap-4">
            {{-- Bedrooms --}}
            <div
                class="rounded-xl border border-slate-200 bg-slate-100/50 dark:border-border dark:bg-card p-3 flex items-center gap-3">
                <svg class="h-6 w-6 text-slate-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M22 15v4a1 1 0 01-1 1H3a1 1 0 01-1-1v-4M22 15V9a1 1 0 00-1-1H3a1 1 0 00-1 1v6M22 15H2M5 10h5v4H5zm9 0h5v4h-5z" />
                </svg>
                <div>
                    <p class="text-[10px] text-muted-foreground uppercase font-semibold">Bedrooms</p>
                    <p class="text-sm font-bold text-foreground">{{ !is_null($property->bedrooms) ? (int)$property->bedrooms : '-' }}</p>
                </div>
            </div>

            {{-- Bathrooms --}}
            <div
                class="rounded-xl border border-slate-200 bg-slate-100/50 dark:border-border dark:bg-card p-3 flex items-center gap-3">
                <svg class="h-6 w-6 text-slate-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M18 8v2a6 6 0 01-12 0V8" />
                    <path d="M6 8V5a2 2 0 012-2h8a2 2 0 012 2v3" />
                    <path d="M2 18h20v2a1 1 0 01-1 1H3a1 1 0 01-1-1v-2z" />
                </svg>
                <div>
                    <p class="text-[10px] text-muted-foreground uppercase font-semibold">Bathrooms</p>
                    <p class="text-sm font-bold text-foreground">{{ !is_null($property->bathrooms) ? (int)$property->bathrooms : '-' }}</p>
                </div>
            </div>

            {{-- Area --}}
            <div
                class="rounded-xl border border-slate-200 bg-slate-100/50 dark:border-border dark:bg-card p-3 flex items-center gap-3">
                <svg class="h-6 w-6 text-slate-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M8 4H4v4M16 4h4v4M4 16v4h4m8-4h4v4" />
                    <path d="M4 12h16M12 4v16" />
                </svg>
                <div>
                    <p class="text-[10px] text-muted-foreground uppercase font-semibold">Area SQFT</p>
                    <p class="text-sm font-bold text-foreground">
                        {{ $property->total_area ? number_format($property->total_area) : '-' }}</p>
                </div>
            </div>
        </div>

        {{-- Financial and Property Details Tables --}}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            {{-- Financial --}}
            <div class="border border-border bg-white dark:bg-card rounded-2xl shadow-sm overflow-hidden flex flex-col">
                <div class="text-xs font-bold text-foreground bg-muted/40 px-4 py-2.5 border-b border-border">
                    Financial
                </div>
                <div class="flex-1 divide-y divide-border/60">
                    @if ($property->list_price)
                        <div class="px-4 py-2 flex justify-between text-xs items-center">
                            <span class="text-muted-foreground">List price</span>
                            <span
                                class="font-bold text-foreground">₹{{ number_format($property->list_price) }}</span>
                        </div>
                    @endif
                    @if ($property->rent_price)
                        @php
                            $rentPeriodSymbol = 'M';
                        if (!empty($property->rent_period)) {
                            $period = strtolower($property->rent_period);
                            if (str_contains($period, 'yearly')) {
                                $rentPeriodSymbol = 'Y';
                            } elseif (str_contains($period, 'quarterly')) {
                                $rentPeriodSymbol = 'Q';
                            }
                        }

                        @endphp
                        <div class="px-4 py-2 flex justify-between text-xs items-center">
                            <span class="text-muted-foreground">Rent price</span>
                            <span
                                class="font-bold text-foreground">₹{{ number_format((float) $property->rent_price) }}/{{ $rentPeriodSymbol }}</span>
                        </div>
                    @endif
                    @if ($property->fair_market_rent)
                        <div class="px-4 py-2 flex justify-between text-xs items-center">
                            <span class="text-muted-foreground">Fair Market Rent</span>
                            <span
                                class="font-bold text-foreground">₹{{ number_format($property->fair_market_rent, 2) }}</span>
                        </div>
                    @endif
                    @if ($detail?->purchase_price)
                        <div class="px-4 py-2 flex justify-between text-xs items-center">
                            <span class="text-muted-foreground">Purchase Price</span>
                            <span
                                class="font-bold text-foreground">₹{{ number_format($detail->purchase_price, 2) }}</span>
                        </div>
                    @endif
                    @if ($detail?->property_taxes)
                        <div class="px-4 py-2 flex justify-between text-xs items-center">
                            <span class="text-muted-foreground">Property Taxes</span>
                            <span
                                class="font-bold text-foreground">₹{{ number_format($detail->property_taxes, 2) }}</span>
                        </div>
                    @endif
                    @if ($detail?->insurance_cost)
                        <div class="px-4 py-2 flex justify-between text-xs items-center">
                            <span class="text-muted-foreground">Insurance Cost</span>
                            <span
                                class="font-bold text-foreground">₹{{ number_format($detail->insurance_cost, 2) }}</span>
                        </div>
                    @endif
                    @if ($detail?->total_operating_expense)
                        <div class="px-4 py-2 flex justify-between text-xs items-center">
                            <span class="text-muted-foreground">Total Operating Expense</span>
                            <span
                                class="font-bold text-foreground">₹{{ number_format($detail->total_operating_expense, 2) }}</span>
                        </div>
                    @endif
                </div>
            </div>

            {{-- Property Details --}}
            <div class="border border-border bg-white dark:bg-card rounded-2xl shadow-sm overflow-hidden flex flex-col">
                <div class="text-xs font-bold text-foreground bg-muted/40 px-4 py-2.5 border-b border-border">
                    Property Details
                </div>
                <div class="flex-1 divide-y divide-border/60">
                    @if ($property->property_type)
                        <div class="px-4 py-2 flex justify-between text-xs items-center">
                            <span class="text-muted-foreground">Type</span>
                            <span class="font-bold text-foreground">{{ $property->property_type }}</span>
                        </div>
                    @endif
                    @if ($detail?->property_condition)
                        <div class="px-4 py-2 flex justify-between text-xs items-center">
                            <span class="text-muted-foreground">Condition</span>
                            <span class="font-bold text-foreground">{{ $detail->property_condition }}</span>
                        </div>
                    @endif
                    @if ($detail?->year_built)
                        <div class="px-4 py-2 flex justify-between text-xs items-center">
                            <span class="text-muted-foreground">Year Built</span>
                            <span class="font-bold text-foreground">{{ $detail->year_built }}</span>
                        </div>
                    @endif
                    @if ($detail?->floor)
                        <div class="px-4 py-2 flex justify-between text-xs items-center">
                            <span class="text-muted-foreground">Floor</span>
                            <span class="font-bold text-foreground">{{ $detail->floor }}</span>
                        </div>
                    @endif
                    @if ($property->total_area)
                        <div class="px-4 py-2 flex justify-between text-xs items-center">
                            <span class="text-muted-foreground">Area SQM</span>
                            <span class="font-bold text-foreground">{{ number_format($property->total_area) }}</span>
                        </div>
                    @endif
                    @if ($detail?->living_area)
                        <div class="px-4 py-2 flex justify-between text-xs items-center">
                            <span class="text-muted-foreground">Living Area</span>
                            <span class="font-bold text-foreground">{{ number_format($detail->living_area) }}
                                SQM</span>
                        </div>
                    @endif
                    @if ($detail?->energy_rating)
                        <div class="px-4 py-2 flex justify-between text-xs items-center">
                            <span class="text-muted-foreground">Energy Rating</span>
                            <span class="font-bold text-foreground">{{ $detail->energy_rating }}</span>
                        </div>
                    @endif
                </div>
            </div>
        </div>



    </div>

    {{-- Right Column (spans 2) --}}
    <div class="md:col-span-2 space-y-6">

        {{-- Amenities --}}
        <div>
            <h4 class="mb-3 text-xs font-bold text-foreground uppercase tracking-wider">Amenities</h4>
            @if ($detail?->amenities && count($detail->amenities))
                <div class="grid grid-cols-2 gap-y-3 gap-x-4">
                    @foreach ($detail->amenities as $amenity)
                        <div class="flex items-center gap-2 text-xs font-medium text-foreground">
                            {!! $getIcon($amenity) !!}
                            <span>{{ $amenity }}</span>
                        </div>
                    @endforeach
                </div>
            @else
                <p class="text-xs text-muted-foreground">No amenities listed.</p>
            @endif
        </div>

        {{-- Features --}}
        <div>
            <h4 class="mb-3 text-xs font-bold text-foreground uppercase tracking-wider">Features</h4>
            @if ($detail?->features && count($detail->features))
                <div class="flex flex-wrap gap-2">
                    @foreach ($detail->features as $feature)
                        <span
                            class="inline-flex items-center rounded-full bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 px-3 py-1.5 text-xs font-medium text-slate-700 dark:text-slate-300">
                            {{ $feature }}
                        </span>
                    @endforeach
                </div>
            @else
                <p class="text-xs text-muted-foreground">No features listed.</p>
            @endif
        </div>

        {{-- Description --}}
        @if ($detail?->description)
            <div class="border border-border bg-white dark:bg-card rounded-2xl p-4 shadow-sm">
                <h4 class="mb-2 text-xs font-bold text-foreground uppercase tracking-wider">Description</h4>
                <p class="text-xs leading-relaxed text-muted-foreground">{{ $detail->description }}</p>
            </div>
        @endif

    </div>

</div>