@extends('layouts.site')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="max-w-6xl mx-auto">
        <!-- Property Header with Back Button -->
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
            <div class="flex items-center gap-3">
                <!-- Back Button -->
                <a href="{{ url()->previous() }}" 
                   class="inline-flex items-center gap-2 px-4 py-2 bg-orange-600 text-white text-sm font-medium rounded-lg shadow hover:bg-orange-700 transition-colors">
                    <i class="fas fa-arrow-left mr-1"></i>
                    Back
                </a>

                <!-- Property Name & Address -->
                <div>
                    <h1 class="text-3xl font-bold text-orange-700">
                        <i class="fas fa-home mr-2"></i>{{ $property->name }}
                    </h1>
                    <p class="text-gray-600 mt-1">
                        <i class="fas fa-map-marker-alt text-orange-500 mr-1"></i>
                        {{ $property->address }}
                    </p>
                </div>
            </div>

            <!-- Status Badge with Icon -->
            <span class="px-4 py-2 rounded-full text-sm font-semibold shadow-sm flex items-center gap-1
                {{ strtolower($property->status) == 'available' ? 'bg-green-100 text-green-800' : 
                   (strtolower($property->status) == 'occupied' ? 'bg-blue-100 text-blue-800' : 
                   (strtolower($property->status) == 'partially occupied' ? 'bg-yellow-100 text-yellow-800' : 'bg-red-100 text-red-800')) }}">
                <i class="fas 
                    {{ strtolower($property->status) == 'available' ? 'fa-check-circle' : 
                       (strtolower($property->status) == 'occupied' ? 'fa-user-check' : 
                       (strtolower($property->status) == 'partially occupied' ? 'fa-users-slash' : 'fa-tools')) }} 
                    text-sm mr-1"></i>
                {{ ucfirst(str_replace('_', ' ', $property->status)) }}
            </span>
        </div>

        <!-- Property Images Gallery -->
        <div class="mb-10 bg-white rounded-lg shadow overflow-hidden">
      @if(!empty($property->all_images))
                <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 p-3">
                    @foreach($property->all_images as $index => $image)
                        <div class="aspect-w-16 aspect-h-9 bg-gray-100 relative group rounded-lg overflow-hidden shadow-sm">
                            <a href="{{ $image }}" 
                               data-lightbox="property-images" 
                               data-title="Property image {{ $index + 1 }}"
                               class="block w-full h-full">
                                <img src="{{ $image }}" 
                                     alt="Property image {{ $index + 1 }}"
                                     class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300 ease-in-out cursor-zoom-in">
                                <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-black/40">
                                    <i class="fas fa-search-plus text-white text-2xl"></i>
                                </div>
                            </a>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="aspect-w-16 aspect-h-9 bg-gray-50 flex items-center justify-center">
                    <div class="text-center p-8">
                        <i class="fas fa-image text-gray-400 text-5xl mb-4"></i>
                        <p class="mt-2 text-gray-500">No images available for this property</p>
                    </div>
                </div>
            @endif
        </div>

        <!-- Main Content Area -->
        <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
            <!-- Left Column -->
            <div class="lg:col-span-3 space-y-6">
                <!-- Property Description -->
                <div class="bg-white rounded-lg shadow overflow-hidden">
                    <div class="p-6">
                        <h2 class="text-xl font-bold text-orange-700 mb-4">
                            <i class="fas fa-info-circle mr-2"></i>Property Details
                        </h2>
                        <div class="prose max-w-none text-gray-700">
                            {!! nl2br(e($property->description ?? 'No description provided.')) !!}
                        </div>
                    </div>
                </div>

                <!-- Units Section -->
                @if($property->units->count() > 0)
                <div class="bg-white rounded-lg shadow overflow-hidden">
                    <div class="p-6">
                        <div class="flex justify-between items-center mb-6">
                            <h2 class="text-xl font-bold text-orange-700">
                                <i class="fas fa-door-open mr-2"></i>Available Units
                            </h2>
                            <span class="text-sm bg-green-100 text-green-800 px-3 py-1 rounded-full font-medium">
                                {{ $availableUnits->count() }} of {{ $property->units->count() }} Available
                            </span>
                        </div>

                        @if($availableUnits->count() > 0)
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                @foreach($availableUnits as $unit)
                                <div class="border border-gray-200 rounded-lg p-4 hover:border-orange-500 hover:shadow-md transition-all">
                                    <div class="flex justify-between items-start mb-3">
                                        <div>
                                            <h3 class="font-bold text-lg text-gray-900">{{ $unit->display_name }}</h3>
                                            @if($unit->description)
                                                <p class="text-sm text-gray-600 mt-1">{{ $unit->description }}</p>
                                            @endif
                                        </div>
                                        @if($unit->is_featured)
                                            <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full font-medium">
                                                <i class="fas fa-star"></i> Featured
                                            </span>
                                        @endif
                                    </div>

                                    <!-- Unit Details -->
                                    <div class="space-y-2 mb-4">
                                        @if($unit->formatted_details)
                                            <p class="text-sm text-gray-600">
                                                <i class="fas fa-info-circle text-orange-500 mr-1"></i>
                                                {{ $unit->formatted_details }}
                                            </p>
                                        @endif

                                        @if($unit->floor_number)
                                            <p class="text-sm text-gray-600">
                                                <i class="fas fa-layer-group text-orange-500 mr-1"></i>
                                                Floor {{ $unit->floor_number }}
                                            </p>
                                        @endif

                                        @if($unit->amenities && count($unit->amenities) > 0)
                                            <div class="flex flex-wrap gap-1 mt-2">
                                                @foreach(array_slice($unit->amenities, 0, 3) as $amenity)
                                                    <span class="text-xs bg-blue-50 text-blue-700 px-2 py-1 rounded">
                                                        {{ ucfirst($amenity) }}
                                                    </span>
                                                @endforeach
                                                @if(count($unit->amenities) > 3)
                                                    <span class="text-xs text-gray-500">+{{ count($unit->amenities) - 3 }} more</span>
                                                @endif
                                            </div>
                                        @endif
                                    </div>

                                    <div class="flex justify-between items-center pt-3 border-t border-gray-200">
                                        <div>
                                            <span class="text-sm text-gray-600">Rent</span>
                                            <p class="text-xl font-bold text-orange-600">UGX {{ number_format($unit->rent_amount) }}/mo</p>
                                        </div>
                                        <a href="{{ route('appointments.create', ['property_id' => $property->id, 'unit_id' => $unit->id]) }}" 
                                           class="bg-orange-600 hover:bg-orange-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                                            <i class="fas fa-calendar-check mr-1"></i> Book Viewing
                                        </a>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        @else
                            <div class="text-center py-8 bg-gray-50 rounded-lg">
                                <i class="fas fa-home text-gray-400 text-4xl mb-3"></i>
                                <p class="text-gray-600">All units are currently occupied</p>
                                <p class="text-sm text-gray-500 mt-2">Check back later for availability</p>
                            </div>
                        @endif
                    </div>
                </div>
                @endif

                <!-- Financial Information -->
                <div class="bg-white rounded-lg shadow overflow-hidden">
                    <div class="p-6">
                        <h2 class="text-xl font-bold text-orange-700 mb-4">
                            <i class="fas fa-money-bill-wave mr-2"></i>Pricing Information
                        </h2>
                        @if($property->units->count() > 0)
                            @php
                                $rents = $property->units->pluck('rent_amount')->filter();
                                $minRent = $rents->min();
                                $maxRent = $rents->max();
                            @endphp
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                <div class="border border-orange-100 p-4 rounded-lg bg-orange-50">
                                    <h3 class="text-sm font-medium text-orange-600 mb-1">
                                        <i class="fas fa-arrow-down mr-1"></i>Starting From
                                    </h3>
                                    <p class="text-2xl font-bold text-orange-700">UGX {{ number_format($minRent) }}/mo</p>
                                </div>
                                @if($minRent != $maxRent)
                                    <div class="border border-orange-100 p-4 rounded-lg bg-orange-50">
                                        <h3 class="text-sm font-medium text-orange-600 mb-1">
                                            <i class="fas fa-arrow-up mr-1"></i>Up To
                                        </h3>
                                        <p class="text-2xl font-bold text-orange-700">UGX {{ number_format($maxRent) }}/mo</p>
                                    </div>
                                @endif
                                <div class="border border-orange-100 p-4 rounded-lg bg-orange-50">
                                    <h3 class="text-sm font-medium text-orange-600 mb-1">
                                        <i class="fas fa-shield-alt mr-1"></i>Security Deposit
                                    </h3>
                                    <p class="text-2xl font-bold text-orange-700">UGX {{ number_format($property->security_deposit) }}</p>
                                </div>
                            </div>
                        @else
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                <div class="border border-orange-100 p-4 rounded-lg bg-orange-50">
                                    <h3 class="text-sm font-medium text-orange-600 mb-1">
                                        <i class="fas fa-calendar-day mr-1"></i>Monthly Rent
                                    </h3>
                                    <p class="text-2xl font-bold text-orange-700">UGX {{ number_format($property->monthly_rent) }}</p>
                                </div>
                                <div class="border border-orange-100 p-4 rounded-lg bg-orange-50">
                                    <h3 class="text-sm font-medium text-orange-600 mb-1">
                                        <i class="fas fa-shield-alt mr-1"></i>Security Deposit
                                    </h3>
                                    <p class="text-2xl font-bold text-orange-700">UGX {{ number_format($property->security_deposit) }}</p>
                                </div>
                                <div class="border border-orange-100 p-4 rounded-lg bg-orange-50">
                                    <h3 class="text-sm font-medium text-orange-600 mb-1">
                                        <i class="fas fa-calculator mr-1"></i>Total Move-In
                                    </h3>
                                    <p class="text-2xl font-bold text-orange-700">UGX {{ number_format($property->monthly_rent + $property->security_deposit) }}</p>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Additional Information -->
                <div class="bg-white rounded-lg shadow overflow-hidden">
                    <div class="p-6">
                        <h2 class="text-xl font-bold text-orange-700 mb-4">
                            <i class="fas fa-clipboard-list mr-2"></i>Property Information
                        </h2>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 text-gray-700">
                            <div>
                                <h3 class="text-sm font-medium text-orange-600">
                                    <i class="fas fa-building mr-1"></i>Property Type
                                </h3>
                                <p class="mt-1">{{ $property->property_type ?? 'N/A' }}</p>
                            </div>
                            @if($property->units->count() > 0)
                                <div>
                                    <h3 class="text-sm font-medium text-orange-600">
                                        <i class="fas fa-door-open mr-1"></i>Total Units
                                    </h3>
                                    <p class="mt-1">{{ $property->units->count() }} units</p>
                                </div>
                            @else
                                @if($property->bedrooms)
                                    <div>
                                        <h3 class="text-sm font-medium text-orange-600">
                                            <i class="fas fa-bed mr-1"></i>Bedrooms
                                        </h3>
                                        <p class="mt-1">{{ $property->bedrooms }}</p>
                                    </div>
                                @endif
                                @if($property->bathrooms)
                                    <div>
                                        <h3 class="text-sm font-medium text-orange-600">
                                            <i class="fas fa-bath mr-1"></i>Bathrooms
                                        </h3>
                                        <p class="mt-1">{{ $property->bathrooms }}</p>
                                    </div>
                                @endif
                            @endif
                            @if($property->square_footage)
                                <div>
                                    <h3 class="text-sm font-medium text-orange-600">
                                        <i class="fas fa-ruler-combined mr-1"></i>Square Footage
                                    </h3>
                                    <p class="mt-1">{{ number_format($property->square_footage) }} sqft</p>
                                </div>
                            @endif
                            @if($property->year_built)
                                <div>
                                    <h3 class="text-sm font-medium text-orange-600">
                                        <i class="fas fa-calendar-alt mr-1"></i>Year Built
                                    </h3>
                                    <p class="mt-1">{{ $property->year_built }}</p>
                                </div>
                            @endif
                            <div>
                                <h3 class="text-sm font-medium text-orange-600">
                                    <i class="fas fa-paw mr-1"></i>Pets Policy
                                </h3>
                                <p class="mt-1">{{ $property->pets_allowed ? 'Pets Allowed' : 'No Pets' }}</p>
                            </div>
                            <div>
                                <h3 class="text-sm font-medium text-orange-600">
                                    <i class="far fa-calendar-plus mr-1"></i>Listed On
                                </h3>
                                <p class="mt-1">{{ $property->created_at?->format('M d, Y') }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Sidebar -->
            <div class="space-y-6">
                <!-- Quick Actions Card -->
                <div class="bg-white rounded-lg shadow overflow-hidden sticky top-4">
                    <div class="p-6">
                        <h2 class="text-xl font-bold text-orange-700 mb-4">
                            <i class="fas fa-bolt mr-2"></i>Interested?
                        </h2>
                        <a href="{{ route('appointments.create', ['property_id' => $property->id]) }}" 
                           class="block w-full bg-orange-600 text-white text-center py-3 rounded-lg hover:bg-orange-700 transition-colors duration-300 shadow mb-3">
                            <i class="fas fa-calendar-alt mr-2"></i> Schedule Viewing
                        </a>
                        <a href="tel:+256XXXXXXXXX" 
                           class="block w-full bg-blue-600 text-white text-center py-3 rounded-lg hover:bg-blue-700 transition-colors duration-300 shadow mb-3">
                            <i class="fas fa-phone-alt mr-2"></i> Call Agent
                        </a>
                        <a href="mailto:info@example.com" 
                           class="block w-full bg-gray-600 text-white text-center py-3 rounded-lg hover:bg-gray-700 transition-colors duration-300 shadow">
                            <i class="fas fa-envelope mr-2"></i> Send Email
                        </a>
                    </div>
                </div>
                
                <!-- Amenities Section -->
                @if($property->amenities && count($property->amenities) > 0)
                <div class="bg-white rounded-lg shadow overflow-hidden">
                    <div class="p-6">
                        <h2 class="text-xl font-bold text-orange-700 mb-4">
                            <i class="fas fa-concierge-bell mr-2"></i>Amenities
                        </h2>
                        <div class="flex flex-wrap gap-2">
                            @foreach($property->amenities as $amenity)
                                <span class="text-sm bg-blue-50 text-blue-700 px-3 py-1 rounded-full">
                                    {{ ucfirst($amenity) }}
                                </span>
                            @endforeach
                        </div>
                    </div>
                </div>
                @endif
                
                <!-- Location Map Card -->
                <div class="bg-white rounded-lg shadow overflow-hidden">
                    <div class="p-6">
                        <h2 class="text-xl font-bold text-orange-700 mb-4">
                            <i class="fas fa-map-marker-alt mr-2"></i>Location
                        </h2>
                        @if($property->latitude && $property->longitude)
                            <div class="h-48 bg-gray-100 rounded-lg flex items-center justify-center mb-3">
                                <i class="fas fa-map text-gray-400 text-3xl"></i>
                                <p class="ml-2 text-gray-600">Map integration</p>
                            </div>
                            <p class="text-sm text-gray-600">
                                <i class="fas fa-location-arrow mr-2 text-orange-500"></i>
                                {{ $property->address }}
                            </p>
                        @else
                            <div class="h-48 bg-gray-50 rounded-lg flex flex-col items-center justify-center">
                                <i class="fas fa-map-marked-alt text-gray-400 text-3xl mb-2"></i>
                                <p class="text-gray-500">Location data not available</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@if(session()->has('success'))
    <div x-data="{ show: true }" 
         x-show="show" 
         x-transition 
         x-init="setTimeout(() => show = false, 5000)"
         class="fixed bottom-4 right-4 bg-green-600 text-white px-6 py-3 rounded-lg shadow-lg flex items-center z-50">
        <i class="fas fa-check-circle mr-2"></i> {{ session('success') }}
    </div>
@endif
@endsection