@extends('frontend.layouts.app')

@section('content')
    <!-- Page Header -->
    <section class="bg-gradient-to-r from-primary-800 to-primary-600 py-12">
        <div class="container">
            <div class="max-w-4xl">
                <nav class="flex items-center gap-2 text-white/60 text-sm mb-4" aria-label="Breadcrumb">
                    <a href="{{ url('/') }}" class="hover:text-white">Home</a>
                    <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="M9 5l7 7-7 7" />
                    </svg>
                    @if (isset($city))
                        <a href="{{ url('/real-estate-in-' . $city->slug) }}"
                            class="hover:text-white">{{ $city->name }}</a>
                        <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="M9 5l7 7-7 7" />
                        </svg>
                    @endif
                    <span class="text-white">{{ $pageTitle ?? 'Properties' }}</span>
                </nav>

                <h1 class="text-3xl lg:text-4xl font-bold text-white mb-3">
                    {{ $pageTitle ?? 'Properties' }}
                </h1>

                <p class="text-white/80 text-lg">
                    @if (isset($listingType) && $listingType === 'rent')
                        Find verified rental properties with transparent terms and no brokerage
                    @else
                        Browse verified properties with clear pricing and legal documentation
                    @endif
                </p>
            </div>
        </div>
    </section>

    <!-- Filters & Listings -->
    <section class="section bg-gray-50">
        <div class="container">
            <div class="lg:flex gap-8">
                <!-- Sidebar Filters -->
                <aside class="lg:w-72 flex-shrink-0 mb-8 lg:mb-0">
                    <div class="bg-white rounded-xl shadow-sm p-6 sticky top-24">
                        <h3 class="font-semibold text-lg mb-4">Filters</h3>

                        <form action="{{ url()->current() }}" method="GET" id="filter-form">
                            <!-- Listing Type -->
                            <div class="mb-4">
                                <label class="form-label">Looking For</label>
                                <div class="flex gap-2">
                                    <a href="{{ url('/buy') }}"
                                        class="flex-1 py-2 text-center rounded-lg text-sm font-medium {{ ($listingType ?? 'sale') === 'sale' ? 'bg-primary-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200' }}">
                                        Buy
                                    </a>
                                    <a href="{{ url('/rent') }}"
                                        class="flex-1 py-2 text-center rounded-lg text-sm font-medium {{ ($listingType ?? 'sale') === 'rent' ? 'bg-primary-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200' }}">
                                        Rent
                                    </a>
                                </div>
                            </div>

                            <!-- Property Type -->
                            <div class="mb-4">
                                <label class="form-label">Property Type</label>
                                <select name="property_type" class="form-select">
                                    <option value="">All Types</option>
                                    <option value="plot" {{ request('property_type') === 'plot' ? 'selected' : '' }}>
                                        Plots</option>
                                    <option value="flat" {{ request('property_type') === 'flat' ? 'selected' : '' }}>
                                        Flats / Apartments</option>
                                    <option value="house" {{ request('property_type') === 'house' ? 'selected' : '' }}>
                                        Houses</option>
                                    <option value="duplex" {{ request('property_type') === 'duplex' ? 'selected' : '' }}>
                                        Duplex</option>
                                    <option value="commercial"
                                        {{ request('property_type') === 'commercial' ? 'selected' : '' }}>Commercial
                                    </option>
                                </select>
                            </div>

                            <!-- Budget -->
                            <div class="mb-4">
                                <label class="form-label">Budget</label>
                                <div class="grid grid-cols-2 gap-2">
                                    <input type="number" name="min_price" placeholder="Min"
                                        value="{{ request('min_price') }}" class="form-input text-sm">
                                    <input type="number" name="max_price" placeholder="Max"
                                        value="{{ request('max_price') }}" class="form-input text-sm">
                                </div>
                            </div>

                            <!-- Bedrooms -->
                            <div class="mb-4">
                                <label class="form-label">Bedrooms</label>
                                <select name="bedrooms" class="form-select">
                                    <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>
                                </select>
                            </div>

                            <!-- Posted Since -->
                            <div class="mb-6">
                                <label class="form-label">Posted</label>
                                <select name="posted" class="form-select">
                                    <option value="">Any Time</option>
                                    <option value="7" {{ request('posted') === '7' ? 'selected' : '' }}>Last 7 Days
                                    </option>
                                    <option value="30" {{ request('posted') === '30' ? 'selected' : '' }}>Last 30 Days
                                    </option>
                                </select>
                            </div>

                            <button type="submit" class="btn btn-primary w-full">
                                Apply Filters
                            </button>

                            @if (request()->hasAny(['property_type', 'min_price', 'max_price', 'bedrooms', 'posted']))
                                <a href="{{ url()->current() }}"
                                    class="block text-center text-sm text-gray-500 hover:text-primary-600 mt-3">
                                    Clear All Filters
                                </a>
                            @endif
                        </form>
                    </div>
                </aside>

                <!-- Listings -->
                <div class="flex-1">
                    <!-- Results Header -->
                    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
                        <p class="text-gray-600">
                            <span class="font-semibold text-gray-900">{{ $properties->total() }}</span> properties found
                        </p>

                        <div class="flex items-center gap-3">
                            <label class="text-sm text-gray-500">Sort by:</label>
                            <select class="form-select py-2 text-sm" onchange="window.location.href=this.value">
                                <option value="{{ request()->fullUrlWithQuery(['sort' => 'latest']) }}"
                                    {{ request('sort', 'latest') === 'latest' ? 'selected' : '' }}>Latest First</option>
                                <option value="{{ request()->fullUrlWithQuery(['sort' => 'price_low']) }}"
                                    {{ request('sort') === 'price_low' ? 'selected' : '' }}>Price: Low to High</option>
                                <option value="{{ request()->fullUrlWithQuery(['sort' => 'price_high']) }}"
                                    {{ request('sort') === 'price_high' ? 'selected' : '' }}>Price: High to Low</option>
                                <option value="{{ request()->fullUrlWithQuery(['sort' => 'popular']) }}"
                                    {{ request('sort') === 'popular' ? 'selected' : '' }}>Most Popular</option>
                            </select>
                        </div>
                    </div>

                    <!-- Property Grid -->
                    @if ($properties->count() > 0)
                        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
                            @foreach ($properties as $property)
                                @include('frontend.partials.property-card', ['property' => $property])
                            @endforeach
                        </div>

                        <!-- Pagination -->
                        <div class="mt-10">
                            {{ $properties->links() }}
                        </div>
                    @else
                        <!-- No Results -->
                        <div class="bg-white rounded-xl p-12 text-center">
                            <div class="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-6">
                                <svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 text-gray-400" fill="none"
                                    viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                                </svg>
                            </div>
                            <h3 class="text-xl font-semibold text-gray-900 mb-2">No properties found</h3>
                            <p class="text-gray-500 mb-6">Try adjusting your filters or search criteria</p>
                            <a href="{{ url('/buy') }}" class="btn btn-primary">
                                Browse All Properties
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-12 bg-gradient-to-r from-secondary-600 to-secondary-700">
        <div class="container">
            <div class="flex flex-col md:flex-row items-center justify-between gap-6 text-white">
                <div>
                    <h2 class="text-2xl font-bold mb-2">Can't find what you're looking for?</h2>
                    <p class="text-white/80">Tell us your requirements and we'll find the perfect property for you.</p>
                </div>
                <div class="flex gap-4">
                    <a href="{{ url('/contact') }}" class="btn btn-white">
                        Contact Us
                    </a>
                    <a href="https://wa.me/{{ $siteWhatsapp }}" target="_blank" class="btn btn-whatsapp">
                        WhatsApp
                    </a>
                </div>
            </div>
        </div>
    </section>
@endsection