@extends('layouts.master')

@section('title', $property->title . ' - HomesInKerala')
@section('meta_description', Str::limit(strip_tags($property->description ?: $property->title . ' in ' . $property->city?->name . ', Kerala'), 155))
@section('canonical', route('properties.show', $property))

@php
    $gallery = $property->getMedia('gallery');
    $cover = $gallery->first();
    $location = collect([$property->area?->name, $property->city?->name, $property->district?->name])->filter()->join(', ');
    $mapQuery = rawurlencode($property->latitude && $property->longitude ? $property->latitude . ',' . $property->longitude : ($location ?: $property->title));
    $mapUrl = "https://maps.google.com/maps?q={$mapQuery}&z=14&output=embed";
    $shareUrl = route('properties.show', $property);
    $site = \App\Support\SiteSettings::class;
    $supportPhone = preg_replace('/\D+/', '', $site::phone());
    $whatsAppText = rawurlencode("Hi, I am interested in {$property->title}. {$shareUrl}");
    $whatsAppUrl = $supportPhone ? "https://wa.me/{$supportPhone}?text={$whatsAppText}" : null;
    $featureItems = [
        ['label' => 'Property ID', 'value' => $property->property_code],
        ['label' => 'Purpose', 'value' => Str::headline($property->purpose ?? '')],
        ['label' => 'Type', 'value' => $property->type?->name],
        ['label' => 'Category', 'value' => $property->category?->name],
        ['label' => 'Bedrooms', 'value' => $property->bedrooms],
        ['label' => 'Bathrooms', 'value' => $property->bathrooms],
        ['label' => 'Built Area', 'value' => $property->built_area_sqft ? number_format((float) $property->built_area_sqft) . ' sqft' : null],
        ['label' => 'Land Area', 'value' => $property->land_area_cent ? number_format((float) $property->land_area_cent) . ' cent' : null],
        ['label' => 'Parking', 'value' => $property->parking_spaces ? $property->parking_spaces . ' spaces' : null],
        ['label' => 'Furnishing', 'value' => $property->furnishing ? Str::headline($property->furnishing) : null],
        ['label' => 'Floors', 'value' => $property->floors],
        ['label' => 'Verification', 'value' => $property->is_verified ? 'Verified' : null],
    ];
    $nearbyPlaces = [
        'Schools and colleges around ' . ($property->city?->name ?: 'the location'),
        'Hospitals and clinics within easy reach',
        'Public transport and main road access',
        'Shopping, restaurants and daily essentials nearby',
    ];
@endphp

@push('head')
    {!! \App\Support\SchemaMarkup::toScript(\App\Support\SchemaMarkup::property($property)) !!}
@endpush

@section('content')
    <section class="property-detail-hero bg-soft py-5 border-bottom">
        <div class="container">
            <div class="row align-items-end g-4">
                <div class="col-lg-8">
                    <p class="text-primary fw-bold text-uppercase small mb-2">{{ $property->type?->name }} for {{ $property->purpose ?: 'property' }}</p>
                    <h1 class="display-6 fw-bold mb-3">{{ $property->title }}</h1>
                    <p class="text-muted mb-0">{{ $location }}</p>
                </div>
                <div class="col-lg-4 text-lg-end">
                    <div class="h2 text-primary fw-bold mb-2">{!! $site::currencySymbol() !!}{{ number_format((float) $property->price) }}</div>
                    <div class="d-flex flex-wrap justify-content-lg-end gap-2">
                        @if($property->is_premium)<span class="badge text-bg-warning">Premium</span>@endif
                        @if($property->is_verified)<span class="badge text-bg-success">Verified</span>@endif
                        <span class="badge text-bg-light text-uppercase">{{ $property->status }}</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="py-5">
        <div class="container">
            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            <div class="row g-4">
                <div class="col-lg-8">
                    <section class="property-detail-card mb-4" aria-labelledby="property-gallery-title">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h2 class="h4 mb-0" id="property-gallery-title">Gallery</h2>
                            <span class="text-muted small">{{ $gallery->count() }} photos</span>
                        </div>

                        @if($cover)
                            <a href="{{ $cover->getUrl() }}" target="_blank">
                                <img src="{{ $cover->hasGeneratedConversion('webp') ? $cover->getUrl('webp') : $cover->getUrl() }}" class="property-detail-main-img" alt="{{ $cover->getCustomProperty('alt', $property->title) }}" decoding="async" fetchpriority="high">
                            </a>
                            @if($gallery->count() > 1)
                                <div class="property-detail-thumbs mt-3">
                                    @foreach($gallery->skip(1)->take(6) as $media)
                                        <a href="{{ $media->getUrl() }}" target="_blank">
                                            <img src="{{ $media->hasGeneratedConversion('thumb') ? $media->getUrl('thumb') : $media->getUrl() }}" alt="{{ $media->getCustomProperty('alt', $property->title) }}" loading="lazy" decoding="async">
                                        </a>
                                    @endforeach
                                </div>
                            @endif
                        @else
                            <div class="property-detail-placeholder">HomesInKerala Property</div>
                        @endif
                    </section>

                    <section class="property-detail-card mb-4" aria-labelledby="property-overview-title">
                        <h2 class="h4 mb-3" id="property-overview-title">Overview</h2>
                        <div class="property-overview-grid">
                            <div><strong>{!! $site::currencySymbol() !!}{{ number_format((float) $property->price) }}</strong><span>Price</span></div>
                            <div><strong>{{ $property->bedrooms ?: '-' }}</strong><span>Bedrooms</span></div>
                            <div><strong>{{ $property->bathrooms ?: '-' }}</strong><span>Bathrooms</span></div>
                            <div><strong>{{ $property->built_area_sqft ? number_format((float) $property->built_area_sqft) : '-' }}</strong><span>Sqft</span></div>
                        </div>
                    </section>

                    <section class="property-detail-card mb-4" aria-labelledby="property-features-title">
                        <h2 class="h4 mb-3" id="property-features-title">Features</h2>
                        <div class="row g-3">
                            @foreach($featureItems as $item)
                                @if(filled($item['value']))
                                    <div class="col-md-6">
                                        <div class="property-feature-item">
                                            <span>{{ $item['label'] }}</span>
                                            <strong>{{ $item['value'] }}</strong>
                                        </div>
                                    </div>
                                @endif
                            @endforeach
                        </div>
                    </section>

                    <section class="property-detail-card mb-4" aria-labelledby="property-description-title">
                        <h2 class="h4 mb-3" id="property-description-title">Description</h2>
                        <div class="text-muted property-description">
                            {!! nl2br(e($property->description ?: 'Detailed property description will be updated soon. Please contact the agent for more information.')) !!}
                        </div>
                    </section>

                    <section class="property-detail-card mb-4" aria-labelledby="property-amenities-title">
                        <h2 class="h4 mb-3" id="property-amenities-title">Amenities</h2>
                        <div class="d-flex flex-wrap gap-2">
                            @forelse($property->amenities as $amenity)
                                <span class="property-amenity-pill">{{ $amenity->name }}</span>
                            @empty
                                <p class="text-muted mb-0">Amenities will be updated soon.</p>
                            @endforelse
                        </div>
                    </section>

                    <section class="property-detail-card mb-4" aria-labelledby="property-map-title">
                        <h2 class="h4 mb-3" id="property-map-title">Map</h2>
                        <div class="ratio ratio-16x9 rounded overflow-hidden">
                            <iframe src="{{ $mapUrl }}" loading="lazy" referrerpolicy="no-referrer-when-downgrade" title="Map for {{ $property->title }}"></iframe>
                        </div>
                    </section>

                    <section class="property-detail-card mb-4" aria-labelledby="property-nearby-title">
                        <h2 class="h4 mb-3" id="property-nearby-title">Nearby Places</h2>
                        <div class="row g-3">
                            @foreach($nearbyPlaces as $place)
                                <div class="col-md-6">
                                    <div class="property-nearby-item">{{ $place }}</div>
                                </div>
                            @endforeach
                        </div>
                    </section>

                    <section class="property-detail-card mb-4" aria-labelledby="property-reviews-title">
                        <div class="d-flex flex-column flex-md-row gap-2 justify-content-between align-items-md-center mb-3">
                            <div>
                                <h2 class="h4 mb-1" id="property-reviews-title">Property Reviews</h2>
                                <p class="text-muted mb-0">{{ number_format($property->average_rating, 1) }} average rating from {{ $property->approvedReviews->count() }} approved reviews</p>
                            </div>
                            <div class="text-warning fs-5">{{ str_repeat('★', (int) round($property->average_rating)) }}</div>
                        </div>

                        @forelse($property->approvedReviews as $review)
                            <div class="border-bottom pb-3 mb-3">
                                <div class="text-warning mb-1">{{ str_repeat('★', (int) $review->rating) }}<span class="text-muted">{{ str_repeat('☆', 5 - (int) $review->rating) }}</span></div>
                                <p class="text-muted mb-1">{{ $review->comment }}</p>
                                <strong>{{ $review->name }}</strong>
                                <small class="text-muted d-block">{{ $review->created_at->format('d M Y') }}</small>
                            </div>
                        @empty
                            <p class="text-muted">No approved property reviews yet.</p>
                        @endforelse

                        <form class="row g-3 mt-3" method="POST" action="{{ route('properties.reviews.store', $property) }}">
                            @csrf
                            <div class="d-none">
                                <label for="property-review-website">Website</label>
                                <input id="property-review-website" name="website" tabindex="-1" autocomplete="off">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label" for="property-review-name">Name</label>
                                <input id="property-review-name" name="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name', auth()->user()?->name) }}" required>
                                @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label" for="property-review-email">Email</label>
                                <input id="property-review-email" type="email" name="email" class="form-control @error('email') is-invalid @enderror" value="{{ old('email', auth()->user()?->email) }}">
                                @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-4">
                                <label class="form-label" for="property-review-rating">Star Rating</label>
                                <select id="property-review-rating" class="form-select @error('rating') is-invalid @enderror" name="rating" required>
                                    <option value="">Select rating</option>
                                    @foreach([5, 4, 3, 2, 1] as $rating)
                                        <option value="{{ $rating }}" @selected((string) old('rating') === (string) $rating)>{{ $rating }} Star</option>
                                    @endforeach
                                </select>
                                @error('rating')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-12">
                                <label class="form-label" for="property-review-comment">Review</label>
                                <textarea id="property-review-comment" name="comment" class="form-control @error('comment') is-invalid @enderror" rows="4" required>{{ old('comment') }}</textarea>
                                @error('comment')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            @include('frontend.partials.recaptcha')
                            <div class="col-12">
                                <button class="btn btn-primary">Submit Review</button>
                            </div>
                        </form>
                    </section>
                </div>

                <div class="col-lg-4">
                    <aside class="property-sidebar">
                        <div class="property-detail-card mb-4">
                            <h2 class="h5 mb-3">Agent Info</h2>
                            <div class="d-flex gap-3 align-items-center">
                                <div class="home-agent-avatar">{{ Str::of($property->agent?->user?->name ?? 'HK')->substr(0, 2)->upper() }}</div>
                                <div>
                                    <h3 class="h6 mb-1">{{ $property->agent?->user?->name ?? 'HomesInKerala Team' }}</h3>
                                    <p class="text-muted small mb-0">{{ $property->agent?->designation ?: 'Property Consultant' }}</p>
                                </div>
                            </div>
                            @if($property->agent?->bio)
                                <p class="text-muted small mt-3 mb-0">{{ Str::limit($property->agent->bio, 150) }}</p>
                            @endif
                        </div>

                        <div class="property-detail-card mb-4">
                            <h2 class="h5 mb-3">Inquiry Form</h2>
                            <form method="POST" action="{{ route('properties.inquiry', $property) }}">
                                @csrf
                                <div class="mb-3">
                                    <label class="form-label" for="inquiry-name">Name</label>
                                    <input id="inquiry-name" name="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name', auth()->user()?->name) }}" required>
                                    @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="inquiry-email">Email</label>
                                    <input id="inquiry-email" type="email" name="email" class="form-control @error('email') is-invalid @enderror" value="{{ old('email', auth()->user()?->email) }}">
                                    @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="inquiry-phone">Phone</label>
                                    <input id="inquiry-phone" name="phone" class="form-control @error('phone') is-invalid @enderror" value="{{ old('phone') }}" required>
                                    @error('phone')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="inquiry-message">Message</label>
                                    <textarea id="inquiry-message" name="message" class="form-control @error('message') is-invalid @enderror" rows="4">{{ old('message', "I'm interested in {$property->title}. Please contact me with more details.") }}</textarea>
                                    @error('message')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                                @include('frontend.partials.recaptcha')
                                <button class="btn btn-primary w-100" type="submit">Send Inquiry</button>
                            </form>
                        </div>

                        <div class="property-detail-card mb-4">
                            <h2 class="h5 mb-3">Quick Actions</h2>
                            <div class="d-grid gap-2">
                                @if($whatsAppUrl)
                                    <a class="btn btn-success" href="{{ $whatsAppUrl }}" target="_blank" rel="noopener">WhatsApp Button</a>
                                @endif
                                <button class="btn btn-outline-primary" id="property-share-button" type="button" data-share-url="{{ $shareUrl }}">Share</button>
                                <button class="btn btn-outline-secondary" type="button" onclick="window.print()">Print</button>
                            </div>
                            @auth
                                <form method="POST" action="{{ route('user.wishlist.store', $property) }}" class="mt-2">
                                    @csrf
                                    <button class="btn property-wishlist-btn w-100">Add to Wishlist</button>
                                </form>
                            @endauth
                        </div>
                    </aside>
                </div>
            </div>
        </div>
    </section>

    <section class="py-5 bg-soft">
        <div class="container">
            <div class="d-flex flex-column flex-md-row gap-3 justify-content-between align-items-md-end mb-4">
                <div>
                    <p class="text-primary fw-bold text-uppercase small mb-1">Similar Properties</p>
                    <h2 class="fw-bold mb-0">You may also like</h2>
                </div>
                <a class="btn btn-outline-primary rounded-pill" href="{{ route('properties.index', ['district' => $property->district?->slug]) }}">View More</a>
            </div>
            <div class="row g-4">
                @forelse($similarProperties as $similar)
                    <div class="col-md-6 col-lg-4">
                        @include('frontend.partials.property-card', ['property' => $similar])
                    </div>
                @empty
                    <div class="col-12">
                        <div class="alert alert-info mb-0">Similar properties will be listed soon.</div>
                    </div>
                @endforelse
            </div>
        </div>
    </section>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const shareButton = document.getElementById('property-share-button');

            shareButton?.addEventListener('click', async () => {
                const shareUrl = shareButton.dataset.shareUrl;

                if (navigator.share) {
                    await navigator.share({
                        title: document.title,
                        url: shareUrl,
                    });
                    return;
                }

                await navigator.clipboard.writeText(shareUrl);
                shareButton.textContent = 'Link Copied';
                setTimeout(() => shareButton.textContent = 'Share', 1600);
            });
        });
    </script>
@endpush