@php
    $purposeIsRent = $property->listing_purpose === 'for_rent';
    $purposeLabel = $purposeIsRent ? 'For Rent' : 'For Sale';
    $typeLabel = $propertyTypes[$property->type] ?? ucfirst(str_replace('-', ' ', $property->type));
    $bhk = \App\Models\Property::bhkDisplayNumber($property->type_details['bhk'] ?? null);
    // Never `location` (the free-text "Full Address" field) — exact
    // address must never reach a public page (PUB-12); it's excluded at
    // the query level too (see PublicPropertySearchService::DETAIL_COLUMNS).
    $localityCity = (string) $property->city;

    $trimNumber = fn ($n) => rtrim(rtrim(number_format((float) $n, 2, '.', ''), '0'), '.');
    $areaLabel  = $trimNumber($property->area) . ' ' . $property->area_unit;

    // The "second spec box" (alongside Area) is genuinely different data per
    // property type, not a copy of Area — flat/bungalow have a real bhk
    // count; plot has real width x depth dimensions (see
    // PropertyFieldTemplateSeeder's 'width_ft'/'depth_ft'); every other type
    // (agricultural_land, commercial, ...) has no such distinct field today,
    // so only Area renders for those rather than showing the same value
    // twice under two different labels.
    $plotWidth  = $property->type === 'plot' ? ($property->type_details['width_ft'] ?? null) : null;
    $plotDepth  = $property->type === 'plot' ? ($property->type_details['depth_ft'] ?? null) : null;
    $plotSizeLabel = (filled($plotWidth) && filled($plotDepth))
        ? $trimNumber($plotWidth) . ' x ' . $trimNumber($plotDepth) . ' ft'
        : null;

    $specs = [['k' => 'Type', 'v' => $typeLabel]];
    if ($bhk) {
        $specs[] = ['k' => 'Configuration', 'v' => $bhk . ' BHK'];
    } elseif ($plotSizeLabel) {
        $specs[] = ['k' => 'Plot Size', 'v' => $plotSizeLabel];
    }
    $specs[] = ['k' => 'Area', 'v' => $areaLabel];
    $specs[] = ['k' => 'Purpose', 'v' => $purposeLabel];
    $images = $property->images;
    $canonicalUrl = route('public.properties.show', ['slug' => $property->public_slug, 'id' => $property->id]);
    $imageUrls = $images->map(fn ($image) => route('public.properties.photo', $image))->values();
    $metaDescription = Str::limit(strip_tags((string) $property->description), 155) ?: ($typeLabel . ' ' . $purposeLabel . ' in ' . $localityCity);

    // RealEstateListing JSON-LD — built from exactly the same public fields
    // shown on this page (PUB-11). No owner/coordinates/notes/price-history,
    // no field not already rendered above (PUB-12).
    $jsonLd = [
        '@context'    => 'https://schema.org',
        '@type'       => 'RealEstateListing',
        'name'        => $property->title,
        'description' => $metaDescription,
        'url'         => $canonicalUrl,
        'datePosted'  => optional($property->created_at)->toAtomString(),
    ];
    if ($imageUrls->isNotEmpty()) {
        $jsonLd['image'] = $imageUrls->all();
    }
    if ($localityCity) {
        $jsonLd['address'] = [
            '@type'           => 'PostalAddress',
            'addressLocality' => $property->city,
            'addressCountry'  => 'IN',
        ];
    }
    $offer = [
        '@type'            => 'Offer',
        'priceCurrency'    => 'INR',
        'availability'     => 'https://schema.org/InStock',
        'businessFunction' => $purposeIsRent
            ? 'http://purl.org/goodrelations/v1#LeaseOut'
            : 'http://purl.org/goodrelations/v1#Sell',
    ];
    if (! $property->price_on_request && $property->price) {
        $offer['price'] = (string) $property->price;
    }
    $jsonLd['offers'] = $offer;
    if ($bhk) {
        $jsonLd['numberOfRooms'] = (int) $bhk;
    }
    if ($property->area) {
        $jsonLd['floorSize'] = [
            '@type'    => 'QuantitativeValue',
            'value'    => (float) $property->area,
            'unitText' => $property->area_unit,
        ];
    }
@endphp
@extends('layouts.public')

@section('title', $property->title . ' | Agrawal Properties')
@section('meta_description', $metaDescription)

@push('head')
<link rel="canonical" href="{{ $canonicalUrl }}">
<meta property="og:url" content="{{ $canonicalUrl }}">
@if ($imageUrls->isNotEmpty())
    <meta property="og:image" content="{{ $imageUrls->first() }}">
@endif
<script type="application/ld+json">{!! json_encode($jsonLd, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}</script>
@endpush

@section('content')
<section class="container py-4 py-lg-5">
    @include('partials.site._breadcrumbs', ['crumbs' => [
        ['label' => 'Home', 'url' => route('public.home')],
        ['label' => $breadcrumbParentLabel, 'url' => $breadcrumbParentUrl],
        ['label' => $property->title],
    ]])

    <div class="row g-4 g-lg-5">
        <div class="col-12 col-lg-7">
            @if ($images->isNotEmpty())
                <figure class="gallery-main mb-2">
                    <img id="galleryMainImg" src="{{ route('public.properties.photo', $images->first()) }}" alt="{{ $property->title }}" style="width:100%;height:100%;object-fit:cover;" data-index="0">
                    <span class="gallery-zoom" id="galleryZoomHint">Enlarge</span>
                </figure>
                @if ($images->count() > 1)
                    {{-- The cover image is included here too (as the first
                         thumbnail, marked active by default) so it stays
                         selectable after viewing another photo — without it,
                         there'd be no way back to the cover once you'd
                         clicked away from it. Clicking any thumbnail only
                         ever updates #galleryMainImg's own src/alt (see the
                         script below) — the thumbnail row itself is never
                         reordered or mutated, so the row's order stays fixed
                         regardless of which thumbnail is currently active.

                         Scroll arrows only render once there are more thumbs
                         than fit in one row (4) — with 4 or fewer there's
                         nothing to scroll to, so the buttons would be dead
                         weight. --}}
                    <div class="position-relative">
                        @if ($images->count() > 4)
                            <button type="button" class="gallery-thumb-scroll-btn gallery-thumb-scroll-prev" id="galleryThumbScrollPrev" aria-label="Scroll thumbnails left">&lsaquo;</button>
                        @endif
                        <div class="gallery-thumbs-row" id="galleryThumbs">
                            @foreach ($images as $index => $image)
                                <div class="gallery-thumb {{ $index === 0 ? 'active' : '' }}" data-full-src="{{ route('public.properties.photo', $image) }}" data-index="{{ $index }}">
                                    <img src="{{ route('public.properties.photo', $image) }}" alt="{{ $property->title }}" style="width:100%;height:100%;object-fit:cover;">
                                </div>
                            @endforeach
                        </div>
                        @if ($images->count() > 4)
                            <button type="button" class="gallery-thumb-scroll-btn gallery-thumb-scroll-next" id="galleryThumbScrollNext" aria-label="Scroll thumbnails right">&rsaquo;</button>
                        @endif
                    </div>
                @endif
            @else
                <figure class="gallery-main mb-2">
                    <span class="ph">Photo coming soon</span>
                </figure>
            @endif
        </div>

        <div class="col-12 col-lg-5">
            <div class="summary-card">
                <span class="prop-type">{{ $typeLabel }} · {{ $purposeLabel }}</span>
                <h1 class="fw-bold mt-2 mb-2" style="font-size:clamp(24px,3.2vw,32px);line-height:1.15;">{{ $property->title }}</h1>
                @if ($localityCity)
                    <div class="d-flex align-items-center gap-1 text-muted-2 mb-1"><span class="text-green">◉</span><span>{{ $localityCity }}</span></div>
                @endif

                <div class="prop-price mt-2" style="font-size:clamp(28px,4vw,38px);">{{ $property->formattedPrice() }}</div>

                <div class="row g-2 mt-2">
                    @foreach ($specs as $spec)
                        <div class="col-6">
                            <div class="spec-box"><div class="k">{{ $spec['k'] }}</div><div class="v">{{ $spec['v'] }}</div></div>
                        </div>
                    @endforeach
                </div>

                <button type="button" class="btn btn-amber w-100 btn-lg mt-3" data-contact="{{ $property->title }}" data-property-id="{{ $property->id }}">Contact about this property</button>
            </div>
        </div>
    </div>

    <div class="row g-4 g-lg-5 mt-1">
        <div class="col-12 col-lg-7">
            <h2 class="h4 fw-bold mb-3">About this property</h2>
            <p style="font-size:16px;line-height:1.75;color:#3A362E;">{{ $property->description ?: 'No description provided yet.' }}</p>
        </div>
        @if ($property->tags->isNotEmpty())
            <div class="col-12 col-lg-5">
                <h2 class="h4 fw-bold mb-3">Amenities &amp; features</h2>
                <div class="row g-2">
                    @foreach ($property->tags as $tag)
                        <div class="col-6">
                            <div class="amenity"><span class="tick">✓</span>{{ $tag->name }}</div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif
    </div>
</section>

@if ($images->isNotEmpty())
{{-- Enlarge lightbox — opened by clicking the main gallery image, shows
     ONLY whatever photo is currently the main image, large, over a dark
     overlay. No Prev/Next here — navigating between photos still happens
     via the thumbnail row behind the modal (or the thumb-scroll arrows),
     not inside the lightbox itself. --}}
<div class="modal fade" id="galleryLightbox" tabindex="-1" aria-labelledby="galleryLightboxLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered gallery-lightbox-dialog">
        <div class="modal-content gallery-lightbox-content">
            <span id="galleryLightboxLabel" class="visually-hidden">{{ $property->title }} — photo</span>
            <button type="button" class="gallery-lightbox-close" data-bs-dismiss="modal" aria-label="Close">&times;</button>
            <img id="galleryLightboxImg" src="" alt="{{ $property->title }}" class="gallery-lightbox-img">
        </div>
    </div>
</div>
@endif

@include('partials.site._related-properties')

@push('scripts')
<script>
(function () {
    var mainImg = document.getElementById('galleryMainImg');
    if (!mainImg) return;

    // A single-image property renders no #galleryThumbs row at all (see the
    // blade template) — the lightbox must still work with just the one
    // photo, so nothing below this point may assume thumbs/thumbEls exist.
    var thumbs   = document.getElementById('galleryThumbs');
    var thumbEls = thumbs ? Array.prototype.slice.call(thumbs.querySelectorAll('.gallery-thumb')) : [];

    // Single source of truth for "which photo is showing" — used by
    // thumbnail clicks, the lightbox's own Prev/Next, and the lightbox's
    // initial open, so all three ways of navigating always agree with each
    // other (closing the lightbox leaves the main image/active thumbnail
    // matching whatever was last viewed inside it).
    function activate(index) {
        var thumb = thumbEls[index];
        if (!thumb) return;

        mainImg.src = thumb.dataset.fullSrc;
        mainImg.alt = thumb.querySelector('img').alt;
        mainImg.dataset.index = String(index);

        thumbEls.forEach(function (el) { el.classList.remove('active'); });
        thumb.classList.add('active');
    }

    if (thumbs) {
        // Event delegation on the row, not a per-thumbnail listener — the
        // thumbnail list is static (rendered once, never rebuilt), so either
        // works, but delegation is the simpler pattern already used
        // elsewhere on this page. Only ever swaps #galleryMainImg's own
        // src/alt; the clicked <div class="gallery-thumb"> and its siblings
        // are never moved, removed, or reordered, so the cover image can't
        // end up displaced into the thumbnail row and the row's order never
        // changes.
        thumbs.addEventListener('click', function (e) {
            var thumb = e.target.closest('.gallery-thumb');
            if (!thumb || !thumbs.contains(thumb)) return;

            activate(parseInt(thumb.dataset.index, 10));
        });

        // Horizontal-scroll arrows for the thumbnail row — only rendered
        // (see the blade template) once there are more than 4 thumbnails,
        // i.e. only when there's actually somewhere to scroll to.
        var scrollPrev = document.getElementById('galleryThumbScrollPrev');
        var scrollNext = document.getElementById('galleryThumbScrollNext');
        var scrollStep = function () { return thumbs.clientWidth * 0.8; };
        if (scrollPrev) scrollPrev.addEventListener('click', function () { thumbs.scrollBy({ left: -scrollStep(), behavior: 'smooth' }); });
        if (scrollNext) scrollNext.addEventListener('click', function () { thumbs.scrollBy({ left: scrollStep(), behavior: 'smooth' }); });
    }

    // Enlarge lightbox — opens on clicking the main image, showing ONLY
    // whatever photo is currently active (no in-lightbox Prev/Next — see
    // the blade template's comment). Works even for a single-image
    // property (no thumbnail row at all). Bootstrap's Modal is already
    // loaded site-wide (see layouts.public) — same call convention already
    // used by the Change Location/Contact modals elsewhere on the public
    // site.
    var lightboxEl  = document.getElementById('galleryLightbox');
    var lightboxImg = document.getElementById('galleryLightboxImg');
    if (lightboxEl && lightboxImg) {
        mainImg.style.cursor = 'zoom-in';
        mainImg.addEventListener('click', function () {
            lightboxImg.src = mainImg.src;
            lightboxImg.alt = mainImg.alt;
            bootstrap.Modal.getOrCreateInstance(lightboxEl).show();
        });

        // Bootstrap's own backdrop is shared by every modal on the page
        // (Change Location/Contact use the default) — this only darkens
        // the ONE backdrop element created for the lightbox itself, by
        // tagging whichever backdrop is current right as it's shown/hidden,
        // rather than a blanket CSS override that would also darken the
        // other modals' backdrops.
        lightboxEl.addEventListener('shown.bs.modal', function () {
            var backdrops = document.querySelectorAll('.modal-backdrop');
            var backdrop = backdrops[backdrops.length - 1];
            if (backdrop) backdrop.classList.add('gallery-lightbox-backdrop');
        });
    }
}());
</script>
@endpush
@endsection