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

<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 md:p-6 mb-8">
    <form action="{{ route('profiles') }}" method="GET" class="space-y-4" id="search-filter-form">
        <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>

            <!-- Location Filter -->
            <div>
                <label for="location" class="block text-sm font-medium text-gray-700 mb-1">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>
        </div>

        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-3 sm:space-y-0">
            <!-- Sort Options -->
            <div class="flex items-center space-x-4">
                <span class="text-sm font-medium text-gray-700">Sort by:</span>
                <div class="flex flex-wrap gap-2">
                    @foreach([
                        'newest' => 'Newest',
                        'goal' => 'Goal Amount',
                        'progress' => 'Progress'
                    ] as $key => $label)
                        <button
                            type="button"
                            data-sort="{{ $key }}"
                            class="sort-button inline-flex items-center px-3 py-1 rounded-full text-xs font-medium {{ request('sort', $currentSort) == $key ? 'bg-primary text-white' : 'bg-gray-100 text-gray-800 hover:bg-gray-200' }}"
                        >
                            {{ $label }}
                        </button>
                    @endforeach
                </div>
                <input type="hidden" name="sort" id="sort-input" value="{{ request('sort', $currentSort) }}">
            </div>

            <!-- Submit Button -->
            <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"
            >
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" 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>
                Apply Filters
            </button>
        </div>
    </form>
</div>

@once
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Handle sort buttons
        const sortButtons = document.querySelectorAll('.sort-button');
        const sortInput = document.getElementById('sort-input');
        const form = document.getElementById('search-filter-form');
        
        sortButtons.forEach(button => {
            button.addEventListener('click', function() {
                const sortValue = this.getAttribute('data-sort');
                sortInput.value = sortValue;
                
                // Update active button styling
                sortButtons.forEach(btn => {
                    btn.classList.remove('bg-primary', 'text-white');
                    btn.classList.add('bg-gray-100', 'text-gray-800', 'hover:bg-gray-200');
                });
                
                this.classList.remove('bg-gray-100', 'text-gray-800', 'hover:bg-gray-200');
                this.classList.add('bg-primary', 'text-white');
                
                // Submit the form
                form.submit();
            });
        });
        
        // Handle category and location change events
        const categorySelect = document.getElementById('category');
        const locationSelect = document.getElementById('location');
        
        [categorySelect, locationSelect].forEach(select => {
            if (select) {
                select.addEventListener('change', function() {
                    form.submit();
                });
            }
        });
        
        // Handle search input (submit after delay)
        const searchInput = document.getElementById('search');
        let searchTimeout;
        
        if (searchInput) {
            searchInput.addEventListener('input', function() {
                clearTimeout(searchTimeout);
                searchTimeout = setTimeout(() => {
                    form.submit();
                }, 500);
            });
        }
    });
</script>
@endonce