@props([
    'categories' => ['Medical Care', 'Housing', 'Food Security', 'Mobility', 'Social Support', 'Mental Health', 'General Assistance'],
    'locations' => [],
    'currentSort' => 'newest',
    'minAge' => 65,
    'maxAge' => 100,
    'needs' => []
])

<div class="bg-white rounded-xl shadow-sm border border-gray-100 mb-8">
    <!-- Basic Filters -->
    <div class="p-4 md:p-6">
        <form id="search-filter-form" action="{{ route('profiles') }}" method="GET" class="space-y-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <!-- Search Input -->
                <div class="col-span-1 md:col-span-3 lg:col-span-1">
                    <label for="search" class="block text-sm font-medium text-gray-700 mb-1">Search</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <circle cx="11" cy="11" r="8"></circle>
                                <path d="m21 21-4.3-4.3"></path>
                            </svg>
                        </div>
                        <input
                            type="text"
                            name="search"
                            id="search"
                            value="{{ request('search') }}"
                            placeholder="Search by name, location, or needs..."
                            class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary focus:border-primary text-sm"
                        >
                    </div>
                </div>

                <!-- Category Filter -->
                <div>
                    <label for="category" class="block text-sm font-medium text-gray-700 mb-1">Category</label>
                    <select
                        name="category"
                        id="category"
                        class="block w-full pl-3 pr-10 py-2 text-base border border-gray-300 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm rounded-md"
                    >
                        <option value="">All Categories</option>
                        @foreach($categories as $category)
                            <option value="{{ $category }}" {{ request('category') == $category ? 'selected' : '' }}>
                                {{ $category }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <!-- Sort By Filter -->
                <div>
                    <label for="sort" class="block text-sm font-medium text-gray-700 mb-1">Sort By</label>
                    <select
                        name="sort"
                        id="sort"
                        class="block w-full pl-3 pr-10 py-2 text-base border border-gray-300 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm rounded-md"
                    >
                        <option value="newest" {{ request('sort', $currentSort) == 'newest' ? 'selected' : '' }}>Newest</option>
                        <option value="oldest" {{ request('sort') == 'oldest' ? 'selected' : '' }}>Oldest</option>
                        <option value="goal" {{ request('sort') == 'goal' ? 'selected' : '' }}>Highest Goal</option>
                        <option value="progress" {{ request('sort') == 'progress' ? 'selected' : '' }}>Most Progress</option>
                        <option value="most-funded" {{ request('sort') == 'most-funded' ? 'selected' : '' }}>Most Funded</option>
                        <option value="least-funded" {{ request('sort') == 'least-funded' ? 'selected' : '' }}>Least Funded</option>
                    </select>
                </div>
            </div>

            <div class="flex justify-between items-center">
                <button 
                    type="button" 
                    id="advanced-filter-toggle"
                    class="text-sm font-medium text-primary flex items-center"
                >
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M3 6h18"></path>
                        <path d="M7 12h10"></path>
                        <path d="M10 18h4"></path>
                    </svg>
                    Advanced Filters
                    <svg xmlns="http://www.w3.org/2000/svg" id="chevron-icon" class="h-4 w-4 ml-1 transition-transform" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="m6 9 6 6 6-6"></path>
                    </svg>
                </button>

                <div>
                    <button
                        type="submit"
                        class="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
                    >
                        Apply Filters
                    </button>
                </div>
            </div>

            <!-- Advanced Filters (Hidden by Default) -->
            <div id="advanced-filters" class="pt-4 border-t border-gray-200 mt-4 hidden">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Age Range Filter -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Age Range</label>
                        <div class="flex items-center space-x-4">
                            <div class="w-1/2">
                                <label for="min_age" class="block text-xs text-gray-500 mb-1">Min Age</label>
                                <input
                                    type="number"
                                    name="min_age"
                                    id="min_age"
                                    min="1"
                                    max="120"
                                    value="{{ request('min_age', $minAge) }}"
                                    class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm"
                                >
                            </div>
                            <div class="w-1/2">
                                <label for="max_age" class="block text-xs text-gray-500 mb-1">Max Age</label>
                                <input
                                    type="number"
                                    name="max_age"
                                    id="max_age"
                                    min="1"
                                    max="120"
                                    value="{{ request('max_age', $maxAge) }}"
                                    class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm"
                                >
                            </div>
                        </div>
                    </div>

                    <!-- Location Filter -->
                    <div>
                        <label for="location" class="block text-sm font-medium text-gray-700 mb-2">Location</label>
                        <select
                            name="location"
                            id="location"
                            class="block w-full pl-3 pr-10 py-2 text-base border border-gray-300 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm rounded-md"
                        >
                            <option value="">All Locations</option>
                            @foreach($locations as $location)
                                <option value="{{ $location }}" {{ request('location') == $location ? 'selected' : '' }}>
                                    {{ $location }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Specific Needs Filter -->
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Specific Needs</label>
                        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2">
                            @foreach($needs as $need)
                                <label class="inline-flex items-center">
                                    <input 
                                        type="checkbox" 
                                        name="needs[]" 
                                        value="{{ $need }}"
                                        {{ in_array($need, (array)request('needs', [])) ? 'checked' : '' }}
                                        class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
                                    >
                                    <span class="ml-2 text-sm text-gray-700">{{ $need }}</span>
                                </label>
                            @endforeach
                        </div>
                    </div>
                </div>

                <div class="flex justify-between mt-6">
                    <button
                        type="button"
                        id="clear-filters"
                        class="text-sm font-medium text-gray-500 hover:text-gray-700"
                    >
                        Clear All Filters
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

@once
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Toggle advanced filters
        const advancedFilterToggle = document.getElementById('advanced-filter-toggle');
        const advancedFilters = document.getElementById('advanced-filters');
        const chevronIcon = document.getElementById('chevron-icon');
        
        if (advancedFilterToggle && advancedFilters) {
            // Check if any advanced filters are active
            const hasAdvancedFilters = {{ 
                request()->has('min_age') || 
                request()->has('max_age') || 
                request()->has('location') || 
                request()->has('needs') ? 'true' : 'false' 
            }};
            
            // Show advanced filters if any are active
            if (hasAdvancedFilters) {
                advancedFilters.classList.remove('hidden');
                chevronIcon.classList.add('rotate-180');
            }
            
            advancedFilterToggle.addEventListener('click', function() {
                advancedFilters.classList.toggle('hidden');
                chevronIcon.classList.toggle('rotate-180');
            });
        }
        
        // Clear all filters
        const clearFiltersBtn = document.getElementById('clear-filters');
        if (clearFiltersBtn) {
            clearFiltersBtn.addEventListener('click', function() {
                window.location.href = '{{ route("profiles") }}';
            });
        }
        
        // Age range validation
        const minAgeInput = document.getElementById('min_age');
        const maxAgeInput = document.getElementById('max_age');
        
        if (minAgeInput && maxAgeInput) {
            minAgeInput.addEventListener('change', function() {
                if (parseInt(minAgeInput.value) > parseInt(maxAgeInput.value)) {
                    maxAgeInput.value = minAgeInput.value;
                }
            });
            
            maxAgeInput.addEventListener('change', function() {
                if (parseInt(maxAgeInput.value) < parseInt(minAgeInput.value)) {
                    minAgeInput.value = maxAgeInput.value;
                }
            });
        }
        
        // Auto-submit on select change
        const autoSubmitSelects = document.querySelectorAll('#category, #sort');
        autoSubmitSelects.forEach(select => {
            select.addEventListener('change', function() {
                document.getElementById('search-filter-form').submit();
            });
        });
        
        // Debounced search
        const searchInput = document.getElementById('search');
        let searchTimeout;
        
        if (searchInput) {
            searchInput.addEventListener('input', function() {
                clearTimeout(searchTimeout);
                searchTimeout = setTimeout(() => {
                    if (searchInput.value.length >= 3 || searchInput.value.length === 0) {
                        document.getElementById('search-filter-form').submit();
                    }
                }, 500);
            });
            
            searchInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    clearTimeout(searchTimeout);
                    document.getElementById('search-filter-form').submit();
                }
            });
        }
    });
</script>
@endonce