@extends('layouts.site')

@section('content')
<div class="container mx-auto px-4 py-8">
    <!-- Search Bar -->
    <div class="mb-8">
        <form action="{{ route('properties.index') }}" method="GET" class="bg-white p-6 rounded-lg shadow">
            <div class="flex flex-col md:flex-row gap-4">
                <div class="flex-grow">
                    <input type="text" name="search" placeholder="Search by property name, address, or description" 
                           value="{{ request('search') }}"
                           class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-orange-500 focus:border-orange-500">
                </div>
                {{-- Preserve all current filter state when using the search bar --}}
                <input type="hidden" name="status" value="{{ request('status', 'all') }}">
                <input type="hidden" name="property_type" value="{{ request('property_type') }}">
                <input type="hidden" name="min_rent" value="{{ request('min_rent') }}">
                <input type="hidden" name="max_rent" value="{{ request('max_rent') }}">
                <input type="hidden" name="bedrooms" value="{{ request('bedrooms') }}">
                <input type="hidden" name="bathrooms" value="{{ request('bathrooms') }}">
                <input type="hidden" name="pets_allowed" value="{{ request('pets_allowed') }}">
                <input type="hidden" name="sort" value="{{ request('sort', 'featured') }}">
                @foreach(request('amenities', []) as $amenity)
                    <input type="hidden" name="amenities[]" value="{{ $amenity }}">
                @endforeach
                <button type="submit" class="bg-orange-600 hover:bg-orange-700 text-white px-6 py-3 rounded-lg font-semibold">
                    <i class="fas fa-search mr-2"></i> Search
                </button>
            </div>
        </form>
    </div>

    <div class="flex flex-col md:flex-row gap-8">
        <!-- Filters Sidebar -->
        <div class="w-full md:w-1/4">
            <div class="bg-white p-6 rounded-lg shadow sticky top-4">
                <h2 class="text-xl font-bold mb-4 text-orange-700">Filter Properties</h2>

                {{-- Single unified filter form --}}
                <form id="filterForm" action="{{ route('properties.index') }}" method="GET">
                    <!-- Preserve search term and sort -->
                    <input type="hidden" name="search" value="{{ request('search') }}">
                    <input type="hidden" name="sort" value="{{ request('sort', 'featured') }}">

                    <!-- Status Filter -->
                    <div class="mb-4">
                        <label class="block text-gray-700 mb-2 font-medium">Status</label>
                        <select name="status" class="filter-auto w-full border border-gray-300 rounded px-3 py-2 focus:ring-orange-500 focus:border-orange-500">
                            <option value="all" {{ request('status', 'all') == 'all' ? 'selected' : '' }}>All Statuses</option>
                            <option value="available" {{ request('status') == 'available' ? 'selected' : '' }}>Available</option>
                            <option value="partially_occupied" {{ request('status') == 'partially_occupied' ? 'selected' : '' }}>Partially Occupied</option>
                            <option value="occupied" {{ request('status') == 'occupied' ? 'selected' : '' }}>Occupied</option>
                        </select>
                    </div>
                    
                    <!-- Property Type -->
                    <div class="mb-4">
                        <label class="block text-gray-700 mb-2 font-medium">Property Type</label>
                        <select name="property_type" class="filter-auto w-full border border-gray-300 rounded px-3 py-2 focus:ring-orange-500 focus:border-orange-500">
                            <option value="">All Types</option>
                            @foreach($propertyTypes as $type)
                                <option value="{{ $type }}" {{ request('property_type') == $type ? 'selected' : '' }}>
                                    {{ ucfirst(str_replace('_', ' ', $type)) }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    
                    <!-- Rent Range Filter -->
                    <div class="mb-4">
                        <label class="block text-gray-700 mb-2 font-medium">Monthly Rent Range (UGX)</label>
                        <div class="flex gap-2">
                            <input type="number" name="min_rent" placeholder="Min" 
                                   value="{{ request('min_rent') }}" 
                                   class="filter-blur w-1/2 border border-gray-300 rounded px-3 py-2 focus:ring-orange-500 focus:border-orange-500">
                            <input type="number" name="max_rent" placeholder="Max" 
                                   value="{{ request('max_rent') }}" 
                                   class="filter-blur w-1/2 border border-gray-300 rounded px-3 py-2 focus:ring-orange-500 focus:border-orange-500">
                        </div>
                    </div>
                    
                    <!-- Bedrooms -->
                    <div class="mb-4">
                        <label class="block text-gray-700 mb-2 font-medium">Bedrooms</label>
                        <select name="bedrooms" class="filter-auto w-full border border-gray-300 rounded px-3 py-2 focus:ring-orange-500 focus:border-orange-500">
                            <option value="">Any</option>
                            <option value="1" {{ request('bedrooms') == '1' ? 'selected' : '' }}>1+</option>
                            <option value="2" {{ request('bedrooms') == '2' ? 'selected' : '' }}>2+</option>
                            <option value="3" {{ request('bedrooms') == '3' ? 'selected' : '' }}>3+</option>
                            <option value="4" {{ request('bedrooms') == '4' ? 'selected' : '' }}>4+</option>
                            <option value="5" {{ request('bedrooms') == '5' ? 'selected' : '' }}>5+</option>
                        </select>
                    </div>
                    
                    <!-- Bathrooms -->
                    <div class="mb-4">
                        <label class="block text-gray-700 mb-2 font-medium">Bathrooms</label>
                        <select name="bathrooms" class="filter-auto w-full border border-gray-300 rounded px-3 py-2 focus:ring-orange-500 focus:border-orange-500">
                            <option value="">Any</option>
                            <option value="1" {{ request('bathrooms') == '1' ? 'selected' : '' }}>1+</option>
                            <option value="2" {{ request('bathrooms') == '2' ? 'selected' : '' }}>2+</option>
                            <option value="3" {{ request('bathrooms') == '3' ? 'selected' : '' }}>3+</option>
                        </select>
                    </div>
                    
                    <!-- Amenities -->
                    <div class="mb-4">
                        <label class="block text-gray-700 mb-2 font-medium">Amenities</label>
                        <div class="space-y-2">
                            @php
                                $amenityOptions = [
                                    'parking'         => 'Parking',
                                    'wifi'            => 'WiFi',
                                    'pool'            => 'Pool',
                                    'gym'             => 'Gym',
                                    'air conditioning'=> 'Air Conditioning',
                                ];
                            @endphp
                            @foreach($amenityOptions as $value => $label)
                                <div class="flex items-center">
                                    <input type="checkbox" 
                                           id="amenity_{{ Str::slug($value) }}" 
                                           name="amenities[]" 
                                           value="{{ $value }}" 
                                           {{ in_array($value, request('amenities', [])) ? 'checked' : '' }}
                                           class="filter-check h-4 w-4 text-orange-600 focus:ring-orange-500 border-gray-300 rounded">
                                    <label for="amenity_{{ Str::slug($value) }}" class="ml-2 text-gray-700">{{ $label }}</label>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    
                    <!-- Pets Allowed -->
                    <div class="mb-6">
                        <label class="block text-gray-700 mb-2 font-medium">Pets Allowed</label>
                        <select name="pets_allowed" class="filter-auto w-full border border-gray-300 rounded px-3 py-2 focus:ring-orange-500 focus:border-orange-500">
                            <option value="">Any</option>
                            <option value="1" {{ request('pets_allowed') === '1' ? 'selected' : '' }}>Yes</option>
                            <option value="0" {{ request('pets_allowed') === '0' ? 'selected' : '' }}>No</option>
                        </select>
                    </div>
                    
                    <button type="submit" class="w-full bg-orange-600 text-white py-2 rounded-lg hover:bg-orange-700 font-medium">
                        Apply Filters
                    </button>
                    <a href="{{ route('properties.index') }}" class="mt-2 block text-center text-orange-600 hover:underline">
                        Reset Filters
                    </a>
                </form>
            </div>
        </div>
        
        <!-- Property Listings -->
        <div class="w-full md:w-3/4">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-2xl font-bold text-orange-700">
                    @php
                        $hasActiveFilters = collect(request()->except(['page', 'sort']))->filter(function($v) {
                            return !empty($v) && $v !== 'all';
                        })->isNotEmpty();
                    @endphp
                    {{ $hasActiveFilters ? 'Filtered Properties' : 'All Properties' }}
                    <span class="text-gray-500 text-lg font-normal ml-2">({{ $properties->total() }} found)</span>
                </h2>

                {{-- Sort — updates the hidden sort field in filterForm and re-submits --}}
                <div class="flex items-center">
                    <span class="text-gray-600 mr-2">Sort by:</span>
                    <select id="sort" class="border border-gray-300 rounded px-3 py-1 focus:ring-orange-500 focus:border-orange-500">
                        <option value="featured"   {{ request('sort', 'featured') == 'featured'   ? 'selected' : '' }}>Featured</option>
                        <option value="price_asc"  {{ request('sort') == 'price_asc'              ? 'selected' : '' }}>Price: Low to High</option>
                        <option value="price_desc" {{ request('sort') == 'price_desc'             ? 'selected' : '' }}>Price: High to Low</option>
                        <option value="newest"     {{ request('sort') == 'newest'                 ? 'selected' : '' }}>Newest</option>
                    </select>
                </div>
            </div>
            
            @if($properties->isEmpty())
                <div class="bg-white p-8 rounded-lg shadow text-center">
                    <i class="fas fa-search text-gray-400 text-5xl mb-4"></i>
                    <h3 class="text-xl font-bold text-gray-700 mb-2">No properties found</h3>
                    <p class="text-gray-600 mb-4">Try adjusting your search or filter criteria</p>
                    <a href="{{ route('properties.index') }}" class="text-orange-600 hover:underline font-medium">
                        Clear all filters
                    </a>
                </div>
            @else
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    @foreach($properties as $property)
                   <div class="bg-white rounded-lg shadow overflow-hidden hover:shadow-lg transition-shadow duration-300 border border-gray-100">
    <!-- Property Image with Status Badge -->
    <div class="relative h-48 overflow-hidden bg-gray-200">
        @php
            $imageUrl = asset('no-image.png'); // Default to no-image.png
            if (!empty($property->images) && is_array($property->images) && count($property->images) > 0) {
                $firstImage = ltrim($property->images[0], '/');
                // Check if it's already a full URL
                if (filter_var($firstImage, FILTER_VALIDATE_URL)) {
                    $imageUrl = $firstImage;
                } else {
                    $imageUrl = asset('storage/' . $firstImage);
                }
            }
        @endphp
        
        <img src="{{ $imageUrl }}" 
             alt="{{ $property->name }}" 
             class="w-full h-full object-cover"
             onerror="this.src='https://via.placeholder.com/400x300/f97316/ffffff?text={{ urlencode($property->name) }}'">
        
        @if($property->is_featured)
            <span class="absolute top-2 left-2 bg-orange-600 text-white text-xs font-bold px-2 py-1 rounded shadow-md">
                <i class="fas fa-star mr-1"></i> Featured
            </span>
        @endif
        
        <span class="absolute top-2 right-2 px-2 py-1 text-xs font-semibold rounded-full shadow-md
            {{ strtolower($property->status) == 'available' ? 'bg-green-500 text-white' : 
               (strtolower($property->status) == 'occupied' ? 'bg-red-500 text-white' : 
               (strtolower($property->status) == 'partially_occupied' ? 'bg-yellow-500 text-white' : 
               'bg-gray-500 text-white')) }}">
            {{ ucfirst(str_replace('_', ' ', $property->status)) }}
        </span>
        
        @if(!empty($property->images) && is_array($property->images) && count($property->images) > 1)
            <span class="absolute bottom-2 right-2 bg-black bg-opacity-60 text-white text-xs px-2 py-1 rounded">
                <i class="fas fa-camera mr-1"></i> {{ count($property->images) }}
            </span>
        @endif
    </div>
    
    <!-- Property Details -->
    <div class="p-4">
        <h3 class="text-lg font-bold text-gray-900 mb-1 truncate" title="{{ $property->name }}">
            {{ $property->name }}
        </h3>
        <p class="text-gray-600 text-sm mb-2 truncate" title="{{ $property->address }}">
            <i class="fas fa-map-marker-alt text-orange-500 mr-1"></i>
            {{ $property->address }}
        </p>
        
        <div class="mb-3">
            <span class="inline-block bg-orange-100 text-orange-800 text-xs font-medium px-2 py-1 rounded">
                {{ match($property->property_type) {
                    'single_house' => '🏠 Single House',
                    'apartment'    => '🏢 Apartment',
                    'commercial'   => '🏭 Commercial',
                    'mixed_use'    => '🏬 Mixed Use',
                    default        => ucfirst(str_replace('_', ' ', $property->property_type))
                } }}
            </span>
        </div>
        
        <div class="flex flex-wrap gap-2 my-3">
            @if($property->units->count() > 0)
                <span class="text-sm bg-gray-100 px-2 py-1 rounded">
                    <i class="fas fa-building text-orange-500 mr-1"></i> 
                    {{ $property->units->count() }} unit{{ $property->units->count() > 1 ? 's' : '' }}
                </span>
                @php $vacantCount = $property->units->where('status', 'vacant')->count(); @endphp
                @if($vacantCount > 0)
                    <span class="text-sm bg-green-100 text-green-800 px-2 py-1 rounded">
                        <i class="fas fa-check-circle mr-1"></i> {{ $vacantCount }} available
                    </span>
                @endif
                @if($property->property_type != 'commercial')
                    @php
                        $unitBedrooms = $property->units->pluck('bedrooms')->filter();
                        $unitBathrooms = $property->units->pluck('bathrooms')->filter();
                        $minBeds = $unitBedrooms->min(); $maxBeds = $unitBedrooms->max();
                        $minBaths = $unitBathrooms->min(); $maxBaths = $unitBathrooms->max();
                    @endphp
                    @if($minBeds)
                        <span class="text-sm bg-gray-100 px-2 py-1 rounded">
                            <i class="fas fa-bed text-orange-500 mr-1"></i> 
                            {{ $minBeds == $maxBeds ? $minBeds . ' bed' . ($minBeds > 1 ? 's' : '') : "$minBeds-$maxBeds beds" }}
                        </span>
                    @endif
                    @if($minBaths)
                        <span class="text-sm bg-gray-100 px-2 py-1 rounded">
                            <i class="fas fa-bath text-orange-500 mr-1"></i> 
                            {{ $minBaths == $maxBaths ? $minBaths . ' bath' . ($minBaths > 1 ? 's' : '') : "$minBaths-$maxBaths baths" }}
                        </span>
                    @endif
                @endif
            @else
                @if($property->bedrooms)
                    <span class="text-sm bg-gray-100 px-2 py-1 rounded">
                        <i class="fas fa-bed text-orange-500 mr-1"></i> 
                        {{ $property->bedrooms }} bed{{ $property->bedrooms > 1 ? 's' : '' }}
                    </span>
                @endif
                @if($property->bathrooms)
                    <span class="text-sm bg-gray-100 px-2 py-1 rounded">
                        <i class="fas fa-bath text-orange-500 mr-1"></i> 
                        {{ $property->bathrooms }} bath{{ $property->bathrooms > 1 ? 's' : '' }}
                    </span>
                @endif
            @endif
            @if($property->square_footage)
                <span class="text-sm bg-gray-100 px-2 py-1 rounded">
                    <i class="fas fa-ruler-combined text-orange-500 mr-1"></i> 
                    {{ number_format($property->square_footage) }} sqft
                </span>
            @endif
        </div>
        
        @if($property->amenities && count($property->amenities) > 0)
            <div class="mb-3">
                <div class="flex flex-wrap gap-1">
                    @foreach(array_slice($property->amenities, 0, 3) as $amenity)
                        <span class="text-xs bg-blue-50 text-blue-700 px-2 py-1 rounded-full">
                            {{ ucfirst($amenity) }}
                        </span>
                    @endforeach
                    @if(count($property->amenities) > 3)
                        <span class="text-xs text-gray-500">+{{ count($property->amenities) - 3 }} more</span>
                    @endif
                </div>
            </div>
        @endif
        
        <div class="mt-4 pt-3 border-t border-gray-100 flex justify-between items-center">
            <div>
                @if($property->units->count() > 0)
                    @php
                        $unitRents = $property->units->pluck('rent_amount')->filter();
                        $minRent = $unitRents->min();
                        $maxRent = $unitRents->max();
                    @endphp
                    @if($minRent && $maxRent)
                        @if($minRent == $maxRent)
                            <span class="text-xl font-bold text-orange-600">
                                UGX {{ number_format($minRent) }}<span class="text-sm font-normal text-gray-600">/mo</span>
                            </span>
                        @else
                            <div class="flex flex-col">
                                <span class="text-xs text-gray-500 uppercase tracking-wide">Starting from</span>
                                <span class="text-xl font-bold text-orange-600">
                                    UGX {{ number_format($minRent) }}<span class="text-sm font-normal text-gray-600">/mo</span>
                                </span>
                            </div>
                        @endif
                    @else
                        <span class="text-xl font-bold text-orange-600">
                            UGX {{ number_format($property->monthly_rent) }}<span class="text-sm font-normal text-gray-600">/mo</span>
                        </span>
                    @endif
                @else
                    <span class="text-xl font-bold text-orange-600">
                        UGX {{ number_format($property->monthly_rent) }}<span class="text-sm font-normal text-gray-600">/mo</span>
                    </span>
                @endif
            </div>
            <a href="{{ route('properties.show', $property) }}" 
               class="bg-orange-600 hover:bg-orange-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors inline-flex items-center gap-1">
                View Details <i class="fas fa-arrow-right text-xs"></i>
            </a>
        </div>
    </div>
</div>
                    @endforeach
                </div>
                
                <div class="mt-8">
                    {{ $properties->appends(request()->query())->links() }}
                </div>
            @endif
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const filterForm = document.getElementById('filterForm');
    const sortSelect = document.getElementById('sort');

    // Auto-submit on dropdown change
    filterForm.querySelectorAll('select.filter-auto').forEach(function (select) {
        select.addEventListener('change', function () {
            filterForm.submit();
        });
    });

    // Auto-submit checkboxes (amenities)
    filterForm.querySelectorAll('input.filter-check').forEach(function (checkbox) {
        checkbox.addEventListener('change', function () {
            filterForm.submit();
        });
    });

    // Rent range: submit on blur (leaving the field), not on every keystroke
    filterForm.querySelectorAll('input.filter-blur').forEach(function (input) {
        input.addEventListener('change', function () {
            filterForm.submit();
        });
    });

    // Sort dropdown — update hidden field in filterForm then submit it
    // so all other active filters are preserved
    if (sortSelect) {
        sortSelect.addEventListener('change', function () {
            filterForm.querySelector('input[name="sort"]').value = this.value;
            filterForm.submit();
        });
    }
});
</script>
@endpush
@endsection