@extends('layouts.guest')

@section('title', $property->title)

@section('content')
<div class="container mx-auto px-4 py-10">
    
    <!-- Breadcrumb -->
    <div class="text-sm text-gray-500 mb-4">
        <a href="/" class="hover:text-blue-600">Home</a> /
        <a href="/properties" class="hover:text-blue-600">Properties</a> /
        <span class="text-gray-700">{{ $property->name }}</span>
    </div>

    <!-- Title & Address -->
    <div class="mb-6">
        <h1 class="text-2xl md:text-3xl font-semibold text-gray-900">{{ $property->name }}</h1>
        <p class="text-gray-600 mt-1">{{ $property->location }}, {{ $property->city }}, {{ $property->state }} - {{ $property->zip_code }}</p>
    </div>

    <!-- Top Section -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
        <!-- Left: Gallery & Info -->
        <div class="lg:col-span-8 space-y-8">

            <!-- Image Slider -->
            <div class="relative">
                <div id="slider" class="relative overflow-hidden rounded-lg shadow-md">
                   {{-- @foreach(($property->images ?? []) as $index => $image) --}}
                        <img 
                            src="{{ optional($property->images->first())->image_url ?? '/default-image.jpg' }}" 
                            class="slide w-full h-[400px] object-cover " 
                            alt="Property Image"
                        >
                    {{-- @endforeach --}}
                </div>
                <button id="prev" class="absolute top-1/2 left-4 transform -translate-y-1/2 bg-white/70 hover:bg-white text-gray-700 p-2 rounded-full shadow">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                    </svg>
                </button>
                <button id="next" class="absolute top-1/2 right-4 transform -translate-y-1/2 bg-white/70 hover:bg-white text-gray-700 p-2 rounded-full shadow">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                    </svg>
                </button>
            </div>

            <!-- Price & Key Details -->
            <div class="grid grid-cols-2 md:grid-cols-3 gap-6 bg-gray-50 p-5 rounded-lg shadow-sm">
                <div>
                    <p class="text-gray-500 text-sm">Price</p>
                    <h3 class="text-lg font-semibold text-gray-900">{{ formatPrice($property->min_price) }}</h3>
                </div>
                <div>
                    <p class="text-gray-500 text-sm">Type</p>
                    <h3 class="text-lg font-semibold text-gray-900">{{ $property->property_type ?? 'N/A' }}</h3>
                </div>
                <div>
                    <p class="text-gray-500 text-sm">Status</p>
                    <h3 class="text-lg font-semibold text-gray-900">{{ ucfirst(str_replace('_', ' ', $property->configurations)) }}</h3>
                </div>
            </div>

            <!-- Overview -->
            <section class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
                <h2 class="text-xl font-semibold text-gray-900 mb-3">Overview</h2>
                <p class="text-gray-700">{!! $property->overview !!}</p>
            </section>

            <!-- Description -->
            <!--section class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
                <h2 class="text-xl font-semibold text-gray-900 mb-3">Description</h2>
                <p class="text-gray-700 leading-relaxed">{{ $property->description }}</p>
            </section-->

            <!-- Features / Amenities -->
            @if(!empty($property->amenities))
            <section class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
                <h2 class="text-xl font-semibold text-gray-900 mb-4">Amenities</h2>
                <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 text-gray-700">
                    @foreach(($property->amenities ?? []) as $feature)
                        <div class="flex items-center gap-2 text-sm bg-gray-50 p-2 rounded">
                            <svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                            <span>{{ $feature }}</span>
                        </div>
                    @endforeach
                </div>
            </section>
            @endif

            <!-- Comments -->
            <section class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
                <h2 class="text-xl font-semibold text-gray-900 mb-4">Comments</h2>
                @forelse($property->comments ?? [] as $comment)
                    <div class="border-b border-gray-100 pb-3 mb-3">
                        <div class="flex justify-between items-center mb-1">
                            <span class="font-semibold text-gray-800">{{ $comment->user->name ?? 'Anonymous' }}</span>
                            <span class="text-gray-500 text-xs">{{ $comment->created_at->format('d M Y') }}</span>
                        </div>
                        <p class="text-gray-700 text-sm">{{ $comment->content }}</p>
                    </div>
                @empty
                    <p class="text-gray-600">No comments yet. Be the first to comment!</p>
                @endforelse

                @auth
                    <form action="{{ route('comments.store', $property->id) }}" method="POST" class="mt-4">
                        @csrf
                        <textarea name="content" rows="3" placeholder="Write your comment..." class="w-full p-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500"></textarea>
                        <button type="submit" class="mt-3 bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition">Add Comment</button>
                    </form>
                @else
                    <p class="mt-4 text-sm text-gray-600">Please <a href="{{ route('login') }}" class="text-blue-600 underline">login</a> to add a comment.</p>
                @endauth
            </section>
        </div>

        <!-- Sidebar -->
        <aside class="lg:col-span-4 space-y-6">
            <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 sticky top-20">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Contact Owner</h3>
                <form action="/contact-iwner" method="POST" id="contactOwnerForm"
		      data-owner-phone="{{ $phone }}"
		      data-owner-email="{{ $email }}" class="space-y-3">
                    @csrf
                    <input name="name" type="text" placeholder="Your Name" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500">
                    <input name="email" type="email" placeholder="Email" required class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500">
                    <input name="phone" type="text" placeholder="Phone" required class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500">
                    <button type="submit" class="w-full bg-green-600 text-white py-2 rounded-lg hover:bg-green-700 transition">Send Enquiry</button>
                    <button type="button" onclick="whatsappAgent()" class="w-full bg-green-500 text-white py-2 rounded-lg hover:bg-green-600 transition flex justify-center items-center gap-2">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M16.5 7.5c-.5-.5-1-1-1.5-1.5S13 5 12 5s-1 .5-1 1 .5 1 1 1c.1 0 .3 0 .5-.1.2.1.4.3.5.5.1.2.1.4 0 .5-.1.1-.4.1-.5 0-.1 0-.3 0-.5-.1s-.4-.5-1-.6-1-.1-1.5 0c-.5.1-1 .4-1.3.7-.3.4-.9 1.3-.9 2.2 0 .9 1 1.6 1 1.6s1.1.7 1.6.6c.5 0 1-.3 1.3-.7.3-.3.8-1.1.8-1.7s-.1-1.2-.6-1.7c-.3-.3-.7-.5-1-.5zM12 19c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z"/></svg>
                        WhatsApp
                    </button>
                </form>
                <div id="contactOwnerResult" class="hidden mt-4 text-center"></div>
            </div>
        </aside>
    </div>
</div>

@php
$message = "I am interested in {$property->name}. Please share more details.";
$phone   = preg_replace('/\D/', '', $phone);
@endphp

<script>
function whatsappAgent() {
window.open(
    'https://wa.me/91{{ $phone }}?text={{ urlencode($message) }}',
    '_blank'
);
}
</script>

<script>
    let currentSlide = 0;
    const slides = document.querySelectorAll('#slider .slide');

    document.getElementById('next')?.addEventListener('click', () => {
        slides[currentSlide].classList.add('hidden');
        currentSlide = (currentSlide + 1) % slides.length;
        slides[currentSlide].classList.remove('hidden');
    });

    document.getElementById('prev')?.addEventListener('click', () => {
        slides[currentSlide].classList.add('hidden');
        currentSlide = (currentSlide - 1 + slides.length) % slides.length;
        slides[currentSlide].classList.remove('hidden');
    });
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {

    const form = document.getElementById('contactOwnerForm');
    const result = document.getElementById('contactOwnerResult');

    if (!form) return;

    form.addEventListener('submit', function (e) {
        e.preventDefault(); // stop normal submit

        if (!form.checkValidity()) {
            form.reportValidity();
            return;
        }

        const formData = new FormData(form);

        fetch(form.action, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': form.querySelector('input[name="_token"]').value,
                'Accept': 'application/json'
            },
            body: formData
        })
        .then(res => res.json())
        .then(() => {

            // Hide form
            form.classList.add('hidden');

            // Show owner contact details
            result.classList.remove('hidden');

            const phone = form.dataset.ownerPhone;
            const email = form.dataset.ownerEmail;

            result.innerHTML = `
                <p class="text-green-600 font-semibold mb-3">
                    Thank you! Contact owner directly:
                </p>

                <div class="space-y-3">
                    <a href="tel:${phone}"
                       class="block bg-blue-600 text-white py-2 rounded-lg">
                        Call ${phone}
                    </a>

                    <a href="mailto:${email}"
                       class="block bg-gray-800 text-white py-2 rounded-lg">
                        Email ${email}
                    </a>

                    <a href="https://wa.me/91${phone}"
                       target="_blank"
                       class="block bg-green-600 text-white py-2 rounded-lg">
                        WhatsApp
                    </a>
                </div>
            `;
        })
        .catch(() => {
            alert('Something went wrong. Please try again.');
        });
    });

});
</script>

@endsection