@extends('layouts.app')

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

@section('content')
<div class="max-w-5xl mx-auto py-10 px-4">

    <!-- Title & Video Tour Button -->
    <h1 class="text-2xl font-bold text-gray-900 mb-4 flex justify-between items-center">
        {{ $property->title }}

        @if($property->video_path)
            <button
                class="text-blue-600 hover:underline text-sm flex items-center"
                data-bs-toggle="modal"
                data-bs-target="#videoTourModal">
                ▶️ Watch Video Tour
            </button>
        @endif
    </h1>

<!-- Property Image -->
@if($property->image_url)
    <a href="{{ $property->image_url }}" data-lightbox="property">
        <img src="{{ $property->image_url }}"
             alt="Property image"
             class="w-full max-h-[600px] object-contain rounded-lg shadow mb-6 cursor-zoom-in">
    </a>
@endif

    <!-- Property Info -->
    <div class="space-y-2 text-gray-700 mb-6">
        <p><strong>Type:</strong> {{ ucfirst($property->type) }}</p>
        <p><strong>City:</strong> {{ $property->city }}</p>
        <p><strong>Address:</strong> {{ $property->address }}</p>
        <p><strong>Price:</strong> ₦{{ number_format($property->price, 0) }}</p>
    </div>

    <!-- Description -->
    <div class="mb-6">
        <h2 class="text-lg font-semibold text-gray-800 mb-2">Description</h2>
        <p class="text-gray-800 leading-relaxed">{{ $property->description }}</p>
    </div>

    <!-- Agent Info -->
    @if($property->agent)
        <div class="bg-gray-100 p-4 rounded-md shadow text-sm text-gray-800">
            <h3 class="font-semibold text-gray-700 mb-2">Agent Information</h3>
            <p>👤 {{ $property->agent->name }}</p>
            <p>📞 {{ $property->agent->phone_number }}</p>
            <p>
                @if($property->agent->isVerified())
                    ✅ <span class="text-green-600">Verified Agent</span>
                @else
                    ⛔ <span class="text-red-500">Unverified Agent</span>
                @endif
            </p>
        </div>
    @endif

    <!-- Video Tour Modal -->
    @if($property->video_path)
        <div class="modal fade" id="videoTourModal" tabindex="-1" aria-labelledby="videoTourModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-fullscreen">
                <div class="modal-content bg-black border-0">
                    <div class="modal-body p-0">
                        <video controls autoplay class="w-full h-full">
                            <source src="{{ asset('storage/' . $property->video_path) }}" type="video/mp4">
                            Your browser does not support the video tag.
                        </video>
                    </div>
                </div>
            </div>
        </div>
    @endif

</div>
<script>
function openFullScreen(img) {
    if (img.requestFullscreen) {
        img.requestFullscreen();
    } else if (img.webkitRequestFullscreen) { /* Safari */
        img.webkitRequestFullscreen();
    } else if (img.msRequestFullscreen) { /* IE11 */
        img.msRequestFullscreen();
    }
}
</script>

@endsection