@extends('layouts.guest')

@section('content')
<div class="container mx-auto px-4 py-10">
<div class="flex items-center justify-between mb-6">
    <h2 class="text-2xl font-bold">
        Search Results ({{ $properties->total() }})
    </h2>

    <!-- Mobile Filter Icon -->
    <button type="button"
            id="filterToggle"
            class="md:hidden p-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-100"
            aria-label="Toggle Filters">

        <!-- Funnel Icon (Heroicons style) -->
        <svg xmlns="http://www.w3.org/2000/svg"
             class="h-5 w-5"
             fill="none"
             viewBox="0 0 24 24"
             stroke="currentColor">
            <path stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M3 4h18l-7 8v6l-4 2v-8L3 4z"/>
        </svg>
    </button>
</div>


    <form method="GET" id="filterForm"
          action="{{ route('property.search') }}"
          class="hidden md:grid mb-8 grid-cols-1 md:grid-cols-6 gap-4
             md:overflow-visible overflow-hidden
             transition-all duration-300
             md:max-h-none">

        {{-- Listing Type --}}
        <select name="listing_type" class="border rounded px-3 py-2">
            <option value="">All Types</option>
            <option value="buy" {{ ($filters['property_type'] ?? '') === 'buy' ? 'selected' : '' }}>Buy</option>
            <option value="rent" {{ ($filters['property_type'] ?? '') === 'rent' ? 'selected' : '' }}>Rent</option>
            <option value="commercial" {{ ($filters['property_type'] ?? '') === 'commercial' ? 'selected' : '' }}>Commercial</option>
        </select>

        {{-- City --}}
        <select name="city" class="border rounded px-3 py-2">
            <option value="">All Cities</option>
            @foreach([
                'Guwahati','Agartala','Dibrugarh','Jorhat','Nagaon','Shillong',
                'Siliguri','Tezpur','Jaipur','Bangalore','Pune','Hyderabad',
                'Chennai','Kolkata','Mumbai','Delhi'
            ] as $city)
                <option value="{{ $city }}"
                    {{ ($filters['city'] ?? '') === $city ? 'selected' : '' }}>
                    {{ $city }}
                </option>
            @endforeach
        </select>

        {{-- Construction Status --}}
        <select name="category" class="border rounded px-3 py-2">
            <option value="">Construction Status</option>
            <option value="new_launch" {{ ($filters['category'] ?? '') === 'new_launch' ? 'selected' : '' }}>New Launch</option>
            <option value="under_construction" {{ ($filters['category'] ?? '') === 'under_construction' ? 'selected' : '' }}>Under Construction</option>
            <option value="ready_to_move" {{ ($filters['category'] ?? '') === 'ready_to_move' ? 'selected' : '' }}>Ready to Move</option>
        </select>

        {{-- Posted By --}}
        <select name="looking_for" class="border rounded px-3 py-2">
            <option value="">Posted By</option>
            <option value="owner" {{ ($filters['looking_for'] ?? '') === 'owner' ? 'selected' : '' }}>Owner</option>
            <option value="builder" {{ ($filters['looking_for'] ?? '') === 'builder' ? 'selected' : '' }}>Builder</option>
        </select>

        {{-- Furnishing --}}
        <select name="furnishing" class="border rounded px-3 py-2">
            <option value="">Furnishing</option>
            <option value="unfurnished" {{ ($filters['furnishing'] ?? '') === 'unfurnished' ? 'selected' : '' }}>Unfurnished</option>
            <option value="semi_furnished" {{ ($filters['furnishing'] ?? '') === 'semi_furnished' ? 'selected' : '' }}>Semi-Furnished</option>
            <option value="furnished" {{ ($filters['furnishing'] ?? '') === 'furnished' ? 'selected' : '' }}>Furnished</option>
        </select>

        {{-- Bedrooms --}}
        <select name="configurations" class="border rounded px-3 py-2">
            <option value="">Bedrooms</option>
            <option value="1" {{ ($filters['configurations'] ?? '') === '1' ? 'selected' : '' }}>1 RK / 1 BHK</option>
            <option value="2" {{ ($filters['configurations'] ?? '') === '2' ? 'selected' : '' }}>2 BHK</option>
            <option value="3" {{ ($filters['configurations'] ?? '') === '3' ? 'selected' : '' }}>3 BHK</option>
            <option value="4" {{ ($filters['configurations'] ?? '') === '4' ? 'selected' : '' }}>4 BHK</option>
            <option value="5" {{ ($filters['configurations'] ?? '') === '5' ? 'selected' : '' }}>5+ BHK</option>
        </select>

        {{-- Budget Min --}}
        <input type="number"
               name="min_price"
               placeholder="Min Budget"
               value="{{ $filters['min_price'] ?? '' }}"
               class="border rounded px-3 py-2" />

        {{-- Budget Max --}}
        <input type="number"
               name="max_price"
               placeholder="Max Budget"
               value="{{ $filters['max_price'] ?? '' }}"
               class="border rounded px-3 py-2" />

        {{-- Keyword --}}
        <input type="text"
               name="q"
               class="border rounded px-3 py-2 md:col-span-2"
               placeholder="Search by name, locality, keyword"
               value="{{ $filters['q'] ?? '' }}" />

        {{-- Submit --}}
        <button type="submit"
                class="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 md:col-span-2">
            Search
        </button>
    </form>

    @if($properties->count())
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
            @foreach($properties as $project)

                @if($project->listing_type === 'rent')
                    <a href="{{ route('property.show', $project->slug) }}"
                       class="bg-white rounded shadow hover:shadow-lg border overflow-hidden block no-underline text-inherit">
                @else

                    <a href="{{ route('project.show', ['project' => $project->slug]) }}"
                       class="bg-white rounded shadow hover:shadow-lg border overflow-hidden block no-underline text-inherit">
                @endif

                    <div class="relative">
                        <img src="{{ $project->main_image_url ?: optional($project->images->first())->image_url }}"
                             class="h-40 w-full object-cover" />

                        <div class="absolute top-2 left-2 flex gap-2">
                            @if($project->listing_status)
                                <span class="bg-green-500 text-white px-2 py-0.5 rounded-full text-xs font-semibold">
                                    {{ ucwords(str_replace(['-', '_'], ' ', $project->listing_status)) }}
                                </span>
                            @endif

                            @if($project->listing_type)
                                <span class="bg-blue-500 text-white px-2 py-0.5 rounded-full text-xs font-semibold">
                                    {{ ucfirst($project->listing_type) }}
                                </span>
                            @endif

                            @if($project->category)
                                <span class="bg-green-500 text-white px-2 py-0.5 rounded-full text-xs font-semibold">
                                    {{ ucwords(str_replace(['-', '_'], ' ', $project->category)) }}
                                </span>
                            @endif
                        </div>
                    </div>

                    <div class="p-4">
                        <div class="font-semibold text-lg truncate">
                            {{ $project->name }}
                        </div>
                        <div class="text-xs text-gray-500">
                            {{ $project->location ?? $project->address ?? '' }}, {{ $project->city }}, {{ $project->state }}
                        </div>
                        <div class="text-xs text-gray-500">
                            {{ $project->configurations }}
                        </div>
                        <div class="text-lg font-bold mt-1">
                            {{ formatPrice($project->min_price) }}
                        </div>
                    </div>
                </a>
            @endforeach
        </div>

        <div class="mt-8">
            {{ $properties->appends(request()->query())->links() }}
        </div>
    @else
        <p class="text-center text-gray-600 text-lg">
            No properties found matching your search criteria.
        </p>
    @endif
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const toggle = document.getElementById('filterToggle');
    const form = document.getElementById('filterForm');

    if (!toggle || !form) return;

    // Ensure desktop is always visible
    if (window.innerWidth >= 768) {
        form.classList.remove('hidden');
        form.style.maxHeight = 'none';
    }

    toggle.addEventListener('click', function () {
        if (window.innerWidth >= 768) return;

        if (form.classList.contains('hidden')) {
            form.classList.remove('hidden');
            form.style.maxHeight = form.scrollHeight + 'px';
        } else {
            form.style.maxHeight = '0px';
            setTimeout(() => form.classList.add('hidden'), 300);
        }
    });

    // Handle resize (mobile → desktop)
    window.addEventListener('resize', function () {
        if (window.innerWidth >= 768) {
            form.classList.remove('hidden');
            form.style.maxHeight = 'none';
        } else {
            form.classList.add('hidden');
            form.style.maxHeight = '0px';
        }
    });
});
</script>



@endsection