@props(['feed', 'country', 'specialty', 'countries', 'specialties'])

<div class="bg-white rounded-lg shadow p-6 mb-6">
    <h2 class="text-lg font-semibold text-gray-900 mb-4">Find healthcare workers</h2>
    
    <form method="GET" action="{{ route('nurse.connect.index') }}" class="space-y-4">
        {{-- When viewing the people search feed the feed radios are not rendered, so include a hidden feed input so
             submitting this form preserves the desired 'search' feed rather than falling back to the default 'all' feed --}}
        @if($feed === 'search')
            <input type="hidden" name="feed" value="search">
        @endif
        <!-- Feed Selection: hidden when viewing 'search' feed -->
        @unless($feed === 'search')
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Feed</label>
            <div class="space-y-2">
                <label class="flex items-center">
                    <input type="radio" name="feed" value="all" {{ $feed === 'all' ? 'checked' : '' }} class="rounded">
                    <span class="ml-2 text-sm">All Posts</span>
                </label>
                <label class="flex items-center">
                    <input type="radio" name="feed" value="network" {{ $feed === 'network' ? 'checked' : '' }} class="rounded">
                    <span class="ml-2 text-sm">My Network</span>
                </label>
                <label class="flex items-center">
                    <input type="radio" name="feed" value="search" {{ $feed === 'search' ? 'checked' : '' }} class="rounded">
                    <span class="ml-2 text-sm">Search</span>
                </label>
                <label class="flex items-center">
                    <input type="radio" name="feed" value="replies" {{ $feed === 'replies' ? 'checked' : '' }} class="rounded">
                    <span class="ml-2 text-sm">Replies</span>
                </label>
                <label class="flex items-center">
                    <input type="radio" name="feed" value="liked" {{ $feed === 'liked' ? 'checked' : '' }} class="rounded">
                    <span class="ml-2 text-sm">Liked</span>
                </label>
                <label class="flex items-center">
                    <input type="radio" name="feed" value="mine" {{ $feed === 'mine' ? 'checked' : '' }} class="rounded">
                    <span class="ml-2 text-sm">My Posts</span>
                </label>
            </div>
        </div>
        @endunless
        
        <!-- Country Filter -->
        <div>
            <label for="country" class="block text-sm font-medium text-gray-700 mb-2">Country</label>
            <select name="country" id="country" class="w-full px-3 py-2 border border-gray-300 rounded-lg">
                <option value="">All Countries</option>
                @foreach($countries as $c)
                    <option value="{{ $c }}" {{ $country === $c ? 'selected' : '' }}>{{ $c }}</option>
                @endforeach
            </select>
        </div>
        
        <!-- Specialty Filter -->
        <div>
            <label for="specialty" class="block text-sm font-medium text-gray-700 mb-2">Specialty</label>
            <select name="specialty" id="specialty" class="w-full px-3 py-2 border border-gray-300 rounded-lg">
                <option value="">All Specialties</option>
                @foreach($specialties as $s)
                    <option value="{{ $s }}" {{ $specialty === $s ? 'selected' : '' }}>{{ $s }}</option>
                @endforeach
            </select>
        </div>
        
        <!-- Universal Search (q) -->
        <div>
            <label for="q" class="block text-sm font-medium text-gray-700 mb-2">Search</label>
            <input type="text" name="q" id="q" placeholder="Search posts, replies, people..." value="{{ request('q', request('search', '')) }}"
                   class="w-full px-3 py-2 border border-gray-300 rounded-lg">
        </div>

        
        <button id="search-submit-btn" type="submit" class="w-full px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition">
            <span id="search-submit-label">Search</span>
        </button>
    </form>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const feedRadios = Array.from(document.querySelectorAll('input[name="feed"]'));
            const submitLabel = document.getElementById('search-submit-label');
            const sidebarPeople = document.getElementById('people-only-filters-sidebar');
            const sidebarSubmitLabel = document.getElementById('sidebar-search-label');

            function updateForFeed(feed) {
                switch (feed) {
                    case 'search':
                        if (sidebarPeople) sidebarPeople.style.display = '';
                        if (submitLabel) submitLabel.textContent = 'Search';
                        if (sidebarSubmitLabel) sidebarSubmitLabel.textContent = 'Search';
                        break;
                    case 'replies':
                        if (sidebarPeople) sidebarPeople.style.display = 'none';
                        if (submitLabel) submitLabel.textContent = 'Search';
                        if (sidebarSubmitLabel) sidebarSubmitLabel.textContent = 'Search';
                        break;
                    case 'liked':
                        if (sidebarPeople) sidebarPeople.style.display = 'none';
                        if (submitLabel) submitLabel.textContent = 'Search';
                        if (sidebarSubmitLabel) sidebarSubmitLabel.textContent = 'Search';
                        break;
                    case 'network':
                        if (sidebarPeople) sidebarPeople.style.display = 'none';
                        if (submitLabel) submitLabel.textContent = 'Search';
                        if (sidebarSubmitLabel) sidebarSubmitLabel.textContent = 'Search';
                        break;
                    case 'mine':
                        if (sidebarPeople) sidebarPeople.style.display = 'none';
                        if (submitLabel) submitLabel.textContent = 'Search';
                        if (sidebarSubmitLabel) sidebarSubmitLabel.textContent = 'Search';
                        break;
                    default:
                        if (sidebarPeople) sidebarPeople.style.display = 'none';
                        if (submitLabel) submitLabel.textContent = 'Search';
                        if (sidebarSubmitLabel) sidebarSubmitLabel.textContent = 'Search';
                }
            }

            feedRadios.forEach(r => r.addEventListener('change', (e) => updateForFeed(e.target.value)));

            // Initialize: if no feed radios (e.g., viewing the Search feed), initialize using the server-provided feed value
            if (feedRadios.length === 0) {
                updateForFeed(@json($feed));
            } else {
                const checked = feedRadios.find(r => r.checked) || feedRadios[0];
                if (checked) updateForFeed(checked.value);
            }
        });
    </script>
</div>