@extends('admin.layouts.app')

@section('title', 'Property Details')

@section('content')
    <div class="flex items-center justify-between mb-6">
        <div>
            <a href="{{ route('admin.properties.index') }}"
                class="text-gray-500 hover:text-gray-700 text-sm mb-2 inline-flex items-center gap-1">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                </svg>
                Back to Properties
            </a>
            <h2 class="text-2xl font-bold text-gray-900">{{ $property->title }}</h2>
        </div>
        <div class="flex items-center gap-3">
            <a href="{{ url('/property/' . $property->slug) }}" target="_blank"
                class="btn btn-outline inline-flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                </svg>
                View on Site
            </a>
            <a href="{{ route('admin.properties.edit', $property) }}" class="btn btn-primary">
                Edit Property
            </a>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Main Content -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Gallery -->
            @if ($property->images->count() > 0)
                <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                    <div class="aspect-video bg-gray-200">
                        <img src="{{ $property->primary_image_url }}" alt="{{ $property->title }}"
                            class="w-full h-full object-cover" id="main-image">
                    </div>
                    @if ($property->images->count() > 1)
                        <div class="flex gap-2 p-4 overflow-x-auto">
                            @foreach ($property->images as $image)
                                <button onclick="document.getElementById('main-image').src='{{ $image->image_url }}'"
                                    class="flex-shrink-0 w-20 h-16 rounded-lg overflow-hidden border-2 hover:border-primary-500">
                                    <img src="{{ $image->thumbnail_url ?? $image->image_url }}" alt=""
                                        class="w-full h-full object-cover">
                                </button>
                            @endforeach
                        </div>
                    @endif
                </div>
            @endif

            <!-- Details -->
            <div class="bg-white rounded-xl shadow-sm p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Property Details</h3>

                <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
                    <div class="p-3 bg-gray-50 rounded-lg">
                        <p class="text-sm text-gray-500">Type</p>
                        <p class="font-semibold">{{ $property->property_type_label }}</p>
                    </div>
                    <div class="p-3 bg-gray-50 rounded-lg">
                        <p class="text-sm text-gray-500">Listing</p>
                        <p class="font-semibold">{{ $property->listing_type === 'sale' ? 'For Sale' : 'For Rent' }}</p>
                    </div>
                    <div class="p-3 bg-gray-50 rounded-lg">
                        <p class="text-sm text-gray-500">Area</p>
                        <p class="font-semibold">{{ number_format($property->area_size) }} {{ $property->area_unit }}</p>
                    </div>
                    @if ($property->bedrooms)
                        <div class="p-3 bg-gray-50 rounded-lg">
                            <p class="text-sm text-gray-500">Bedrooms</p>
                            <p class="font-semibold">{{ $property->bedrooms }}</p>
                        </div>
                    @endif
                    @if ($property->bathrooms)
                        <div class="p-3 bg-gray-50 rounded-lg">
                            <p class="text-sm text-gray-500">Bathrooms</p>
                            <p class="font-semibold">{{ $property->bathrooms }}</p>
                        </div>
                    @endif
                    @if ($property->facing)
                        <div class="p-3 bg-gray-50 rounded-lg">
                            <p class="text-sm text-gray-500">Facing</p>
                            <p class="font-semibold">{{ ucfirst($property->facing) }}</p>
                        </div>
                    @endif
                    @if ($property->furnishing)
                        <div class="p-3 bg-gray-50 rounded-lg">
                            <p class="text-sm text-gray-500">Furnishing</p>
                            <p class="font-semibold">{{ ucfirst(str_replace('-', ' ', $property->furnishing)) }}</p>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Description -->
            <div class="bg-white rounded-xl shadow-sm p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Description</h3>
                <div class="prose max-w-none">
                    {!! nl2br(e($property->description)) !!}
                </div>
            </div>

            <!-- Amenities -->
            @if ($property->amenities->count() > 0)
                <div class="bg-white rounded-xl shadow-sm p-6">
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">Amenities</h3>
                    <div class="flex flex-wrap gap-2">
                        @foreach ($property->amenities as $amenity)
                            <span
                                class="px-3 py-1 bg-gray-100 rounded-full text-sm text-gray-700">{{ $amenity->name }}</span>
                        @endforeach
                    </div>
                </div>
            @endif

            <!-- Inquiries -->
            @if ($property->inquiries->count() > 0)
                <div class="bg-white rounded-xl shadow-sm p-6">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold text-gray-900">Recent Inquiries</h3>
                        <a href="{{ route('admin.inquiries.index', ['property' => $property->id]) }}"
                            class="text-sm text-primary-600 hover:underline">View all</a>
                    </div>
                    <div class="space-y-3">
                        @foreach ($property->inquiries as $inquiry)
                            <div class="p-4 bg-gray-50 rounded-lg">
                                <div class="flex items-start justify-between">
                                    <div>
                                        <p class="font-medium text-gray-900">{{ $inquiry->name }}</p>
                                        <p class="text-sm text-gray-500">{{ $inquiry->phone }} | {{ $inquiry->email }}</p>
                                    </div>
                                    <span class="text-xs text-gray-400">{{ $inquiry->created_at->diffForHumans() }}</span>
                                </div>
                                @if ($inquiry->message)
                                    <p class="text-sm text-gray-600 mt-2">{{ Str::limit($inquiry->message, 150) }}</p>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif
        </div>

        <!-- Sidebar -->
        <div class="space-y-6">
            <!-- Price & Status -->
            <div class="bg-white rounded-xl shadow-sm p-6">
                <p class="text-3xl font-bold text-primary-700 mb-2">{{ $property->formatted_price }}</p>
                @if ($property->listing_type === 'rent')
                    <p class="text-gray-500 text-sm mb-4">per month</p>
                @endif

                <div class="space-y-3 pt-4 border-t">
                    <div class="flex items-center justify-between">
                        <span class="text-gray-500">Status</span>
                        @php
                            $statusColors = [
                                'active' => 'badge-success',
                                'inactive' => 'badge-gray',
                                'sold' => 'badge-warning',
                                'rented' => 'badge-info',
                                'draft' => 'badge-gray',
                            ];
                        @endphp
                        <span
                            class="badge {{ $statusColors[$property->status] ?? 'badge-gray' }}">{{ ucfirst($property->status) }}</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-gray-500">Verified</span>
                        <span
                            class="badge {{ $property->is_verified ? 'badge-success' : 'badge-gray' }}">{{ $property->is_verified ? 'Yes' : 'No' }}</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-gray-500">Featured</span>
                        <span
                            class="badge {{ $property->is_featured ? 'badge-warning' : 'badge-gray' }}">{{ $property->is_featured ? 'Yes' : 'No' }}</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-gray-500">Views</span>
                        <span class="font-medium">{{ number_format($property->views_count) }}</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-gray-500">Inquiries</span>
                        <span class="font-medium">{{ $property->inquiries()->count() }}</span>
                    </div>
                </div>
            </div>

            <!-- Location -->
            <div class="bg-white rounded-xl shadow-sm p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Location</h3>
                <p class="text-gray-700">{{ $property->full_location }}</p>
                @if ($property->address)
                    <p class="text-sm text-gray-500 mt-2">{{ $property->address }}</p>
                @endif
            </div>

            <!-- Legal -->
            <div class="bg-white rounded-xl shadow-sm p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Legal Details</h3>
                <div class="space-y-2">
                    @if ($property->rera_approved)
                        <div class="flex items-center gap-2 text-green-600">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20"
                                fill="currentColor">
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd" />
                            </svg>
                            RERA Approved
                        </div>
                        @if ($property->rera_number)
                            <p class="text-sm text-gray-500 ml-7">{{ $property->rera_number }}</p>
                        @endif
                    @endif

                    @if ($property->bank_approved)
                        <div class="flex items-center gap-2 text-green-600">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20"
                                fill="currentColor">
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clip-rule="evenodd" />
                            </svg>
                            Bank Loan Available
                        </div>
                    @endif

                    @if ($property->ownership_type)
                        <p class="text-sm text-gray-600">Ownership: {{ ucfirst($property->ownership_type) }}</p>
                    @endif
                </div>
            </div>

            <!-- Meta -->
            <div class="bg-white rounded-xl shadow-sm p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Meta Info</h3>
                <div class="space-y-2 text-sm">
                    <p><span class="text-gray-500">ID:</span> {{ $property->id }}</p>
                    <p><span class="text-gray-500">Slug:</span> {{ $property->slug }}</p>
                    <p><span class="text-gray-500">Created:</span> {{ $property->created_at->format('M d, Y H:i') }}</p>
                    <p><span class="text-gray-500">Updated:</span> {{ $property->updated_at->format('M d, Y H:i') }}</p>
                    @if ($property->user)
                        <p><span class="text-gray-500">Owner:</span> {{ $property->user->name }}</p>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection