@extends('layouts.landing')

@section('content')
<!-- Page Header -->
<div class="relative overflow-hidden bg-gradient-to-br from-brand-700 via-brand-800 to-slate-900 text-white">
    <div class="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent"></div>
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24">
        <h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold mb-4 tracking-tight">
            {{ __('messages.browse_properties') ?? 'Browse Properties' }}
        </h1>
        <p class="text-lg md:text-xl text-red-100 max-w-2xl">
            {{ __('messages.find_your_perfect_property') ?? 'Find your perfect property from our extensive collection' }}
        </p>
    </div>
</div>

<!-- Filters Section -->
<div class="sticky top-16 z-20 border-b border-stone-200 bg-white/95 shadow-lg backdrop-blur-sm">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <form action="{{ route('properties.index') }}" method="GET" class="space-y-4">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
                <div class="lg:col-span-2">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        {{ __('messages.location') ?? 'Location' }}
                    </label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                            </svg>
                        </div>
                        <input type="text" 
                               name="location"
                               value="{{ request('location') }}"
                               placeholder="{{ __('messages.city_or_address') ?? 'City or Address' }}"
                               class="w-full pl-10 pr-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-red-500 focus:border-red-500 transition-all duration-200">
                    </div>
                </div>
                
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        {{ __('messages.property_type') ?? 'Property Type' }}
                    </label>
                    <select name="type" class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-red-500 focus:border-red-500 transition-all duration-200 bg-white">
                        <option value="">{{ __('messages.all_types') }}</option>
                        @foreach($propertyTypes as $type)
                            <option value="{{ $type }}" {{ request('type') === $type ? 'selected' : '' }}>
                                {{ __('messages.' . $type) ?? ucfirst($type) }}
                            </option>
                        @endforeach
                    </select>
                </div>
                
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        {{ __('messages.status') ?? 'Status' }}
                    </label>
                    <select name="status" class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-red-500 focus:border-red-500 transition-all duration-200 bg-white">
                        <option value="">{{ __('messages.all') }}</option>
                        <option value="available" {{ request('status') === 'available' ? 'selected' : '' }}>
                            {{ __('messages.available') ?? 'Available' }}
                        </option>
                        <option value="rented" {{ request('status') === 'rented' ? 'selected' : '' }}>
                            {{ __('messages.rented') ?? 'Rented' }}
                        </option>
                        <option value="sold" {{ request('status') === 'sold' ? 'selected' : '' }}>
                            {{ __('messages.sold') ?? 'Sold' }}
                        </option>
                    </select>
                </div>
                
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        {{ __('messages.max_price') ?? 'Max Price (TZS)' }}
                    </label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <span class="text-gray-400 font-medium">TZS</span>
                        </div>
                        <input type="number" 
                               name="max_price"
                               value="{{ request('max_price') }}"
                               placeholder="{{ __('messages.max_price') ?? 'Max Price' }}"
                               class="w-full pl-12 pr-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-red-500 focus:border-red-500 transition-all duration-200">
                    </div>
                </div>
            </div>
            
            <div class="flex flex-col sm:flex-row gap-4 justify-between items-center pt-2">
                <div class="text-sm font-medium text-gray-600">
                    {{ __('messages.showing') ?? 'Showing' }} 
                    <span class="font-bold text-gray-900">{{ $properties->firstItem() ?? 0 }}</span> - 
                    <span class="font-bold text-gray-900">{{ $properties->lastItem() ?? 0 }}</span> 
                    {{ __('messages.of') ?? 'of' }} 
                    <span class="font-bold text-gray-900">{{ $properties->total() }}</span> 
                    {{ __('messages.properties') ?? 'properties' }}
                </div>
                <div class="flex gap-3">
                    <button type="submit" class="inline-flex items-center gap-2 rounded-xl bg-brand-600 px-6 py-3 font-semibold text-white transition-all duration-200 hover:scale-105 hover:bg-brand-700 hover:shadow-lg">
                        <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>
                        {{ __('messages.apply_filters') ?? 'Apply Filters' }}
                    </button>
                    @if(request()->anyFilled(['location', 'type', 'status', 'max_price']))
                    <a href="{{ route('properties.index') }}"
                       class="inline-flex items-center gap-2 rounded-xl border border-stone-200 bg-white px-6 py-3 font-semibold text-stone-700 hover:bg-stone-50 hover:border-stone-300 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-brand-600 focus:ring-offset-2"
                    >
                        <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="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                        {{ __('messages.clear') ?? 'Clear' }}
                    </a>
                    @endif
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Properties Grid -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    @if($properties->count() > 0)
        <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 md:gap-8">
            @foreach($properties as $property)
                <x-property-card :property="$property" />
            @endforeach
        </div>
        
        <!-- Modern Pagination -->
        <div class="mt-16">
            {{ $properties->links('pagination.tailwind') }}
        </div>
    @else
        <!-- Empty State -->
        <div class="text-center py-20">
            <svg class="mx-auto h-24 w-24 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
            </svg>
            <h3 class="mt-4 text-2xl font-semibold text-gray-900">
                {{ __('messages.no_properties_found') ?? 'No Properties Found' }}
            </h3>
            <p class="mt-2 text-gray-600 max-w-md mx-auto">
                {{ __('messages.try_adjusting_filters') ?? 'Try adjusting your filters or search criteria to find more properties.' }}
            </p>
            <div class="mt-6">
                <a href="{{ route('properties.index') }}" class="inline-block bg-brand-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-brand-700 transition duration-300 shadow-sm hover:shadow-md">
                    {{ __('messages.clear_filters') ?? 'Clear All Filters' }}
                </a>
            </div>
        </div>
    @endif
</div>
@endsection