@props(['allTags'])

<form id="search-filters" class="space-y-5">
    <!-- Search Input -->
    <div>
        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">Search</label>
        <div class="relative">
            <input type="text"
                   name="search"
                   placeholder="Search by name or bio..."
                   value="{{ request('search') }}"
                   class="w-full pl-10 pr-4 py-2.5 rounded-xl bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-indigo-500 focus:bg-white dark:focus:bg-gray-600 transition-all duration-200">
            <svg class="absolute left-3 top-3 w-5 h-5 text-gray-400" 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"/>
            </svg>
        </div>
    </div>

    <!-- Location Filter -->
    <div>
        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">Location</label>
        <div class="relative">
            <input type="text"
                   name="location"
                   placeholder="City or zip code"
                   value="{{ request('location') }}"
                   class="w-full pl-10 pr-4 py-2.5 rounded-xl bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-indigo-500 focus:bg-white dark:focus:bg-gray-600 transition-all duration-200">
            <svg class="absolute left-3 top-3 w-5 h-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 stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
        </div>
    </div>

    <!-- Price Range -->
    <div>
        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
            <div class="flex items-center">
                <svg class="w-4 h-4 mr-1.5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                Price Range (per hour)
            </div>
        </label>
        <div class="grid grid-cols-2 gap-3">
            <div class="relative">
                <span class="absolute left-3 top-3 text-gray-500 text-sm">$</span>
                <input type="number"
                       name="min_price"
                       placeholder="50"
                       min="50"
                       max="500"
                       value="{{ request('min_price') }}"
                       class="w-full pl-7 pr-4 py-2.5 rounded-xl bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-indigo-500 focus:bg-white dark:focus:bg-gray-600 transition-all duration-200">
            </div>
            <div class="relative">
                <span class="absolute left-3 top-3 text-gray-500 text-sm">$</span>
                <input type="number"
                       name="max_price"
                       placeholder="500"
                       min="50"
                       max="500"
                       value="{{ request('max_price') }}"
                       class="w-full pl-7 pr-4 py-2.5 rounded-xl bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-indigo-500 focus:bg-white dark:focus:bg-gray-600 transition-all duration-200">
            </div>
        </div>
    </div>

    <!-- Willing to Travel -->
    <div class="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-xl">
        <label class="flex items-center cursor-pointer">
            <input type="checkbox"
                   name="willing_to_travel"
                   value="1"
                   {{ request('willing_to_travel') ? 'checked' : '' }}
                   class="w-5 h-5 rounded-lg text-indigo-600 focus:ring-indigo-500 focus:ring-offset-0">
            <div class="ml-3 flex items-center">
                <svg class="w-5 h-5 mr-2 text-indigo-600 dark:text-indigo-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" />
                </svg>
                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Willing to travel</span>
            </div>
        </label>
    </div>

    <!-- Tags/Specializations -->
    <div>
        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
            <div class="flex items-center">
                <svg class="w-4 h-4 mr-1.5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
                </svg>
                Specializations
            </div>
        </label>
        <div class="space-y-2 max-h-48 overflow-y-auto pr-2 custom-scrollbar">
            @foreach($allTags as $tag)
                <label class="flex items-center cursor-pointer p-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors group">
                    <input type="checkbox"
                           name="tags[]"
                           value="{{ $tag->id }}"
                           {{ in_array($tag->id, request('tags', [])) ? 'checked' : '' }}
                           class="w-4 h-4 rounded text-indigo-600 focus:ring-indigo-500 focus:ring-offset-0">
                    <span class="ml-2.5 text-sm text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-white">{{ $tag->name }}</span>
                </label>
            @endforeach
        </div>
    </div>

    <!-- Filter Actions -->
    <div class="pt-6 space-y-3 mt-6">
        <button type="submit"
                class="w-full px-4 py-3 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white text-sm font-semibold rounded-xl shadow-md hover:shadow-lg transform hover:scale-[1.02] transition-all duration-200 flex items-center justify-center space-x-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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
            <span>Apply Filters</span>
        </button>
        <button type="button"
                onclick="document.getElementById('search-filters').reset(); window.location.href='{{ route('golfers.index') }}';"
                class="w-full px-4 py-3 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 text-sm font-semibold rounded-xl transition-all duration-200 flex items-center justify-center space-x-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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
            </svg>
            <span>Clear All</span>
        </button>
    </div>
</form>