@php
    $ratings = [
        'Outstanding',
        'Good',
        'Requires improvement',
        'Inadequate',
        'Inspected but not rated',
    ];

    $localAuthoritiesFile = resource_path('data/local_authorities.json');
    $localAuthorities = file_exists($localAuthoritiesFile) ? json_decode(file_get_contents($localAuthoritiesFile), true) : [];

    // Determine the active search context
    $endpoint = request('endpoint');
    if (empty($endpoint)) {
        if (request()->routeIs('providers.index') || request()->routeIs('providers.index.filter') || request()->routeIs('providers.show') || request()->path() === 'providers') {
            $endpoint = 'providers';
        } else {
            $endpoint = 'locations';
        }
    }

    // Read from route parameters (resolved by controller) or fallback to request
    $type = $type ?? request()->route('type') ?? request('type', 'any');
    $overallRating = $overallRating ?? request()->route('overallRating') ?? request('overallRating');
    $localAuthority = $localAuthority ?? request()->route('localAuthority') ?? request('localAuthority');

    // Check if any filters are currently active to show reset option before normalizing for display
    $isFiltered = (!empty($overallRating) && $overallRating !== 'all') || 
                  (!empty($localAuthority) && $localAuthority !== 'all') || 
                  (!empty($type) && $type !== 'any');

    // Normalize rating for option selection
    if ($overallRating === 'all') {
        $overallRating = '';
    }

    // Normalize local authority back to canonical name for input display
    if (!empty($localAuthority) && $localAuthority !== 'all') {
        $searchSlug = strtolower(str_replace(' ', '-', preg_replace('/[^a-zA-Z0-9\s-]/', '', $localAuthority)));
        $matchedAuthority = null;
        foreach ($localAuthorities as $la) {
            if (\Illuminate\Support\Str::slug($la) === $searchSlug || strtolower($la) === strtolower($localAuthority)) {
                $matchedAuthority = $la;
                break;
            }
        }
        $localAuthority = $matchedAuthority ?? str_replace('-', ' ', $localAuthority);
    } else {
        $localAuthority = '';
    }

    $normalizeType = function($t) {
        return strtolower(str_replace([' ', '_', '+', '-'], '', $t ?? ''));
    };
@endphp

<div class="bg-white border border-[#D8DDE0] border-t-8 border-l-4 border-[#005EB8] rounded-2xl p-5 sm:p-6 shadow-sm">
        <h2 class="text-sm font-bold text-[#002F6C] mb-4 flex items-center gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4.5 h-4.5 text-[#005EB8]">
                <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.602 10.602Z" />
            </svg>
            Search & Filter Healthcare Registry
        </h2>

        <form id="global-search-form" action="{{ $endpoint === 'providers' ? route('providers.index') : route('locations.index') }}" method="GET" class="grid grid-cols-2 lg:grid-cols-5 gap-4 items-end">
            <!-- Search Endpoint Select -->
            <div class="flex flex-col gap-1.5">
                <label for="search-endpoint" class="text-xs font-bold text-[#4c6272]">Directory Endpoint</label>
                <select name="endpoint" id="search-endpoint" onchange="document.getElementById('global-search-form').action = this.value === 'providers' ? '{{ route('providers.index') }}' : '{{ route('locations.index') }}'" class="w-full bg-white border border-[#D8DDE0] rounded-xl px-3.5 py-2 text-sm text-[#212B32] focus:outline-none focus:border-[#005EB8] focus:ring-1 focus:ring-[#005EB8]/20 transition">
                    <option value="locations" {{ $endpoint === 'locations' ? 'selected' : '' }}>Locations</option>
                    <option value="providers" {{ $endpoint === 'providers' ? 'selected' : '' }}>Providers</option>
                </select>
            </div>

            <!-- Facility Type Select -->
            <div class="flex flex-col gap-1.5">
                <label for="search-type" class="text-xs font-bold text-[#4c6272]">Type of Facility</label>
                <select name="type" id="search-type" class="w-full bg-white border border-[#D8DDE0] rounded-xl px-3.5 py-2 text-sm text-[#212B32] focus:outline-none focus:border-[#005EB8] focus:ring-1 focus:ring-[#005EB8]/20 transition">
                    <option value="any" {{ $normalizeType($type) === 'any' ? 'selected' : '' }}>Any Type</option>
                    <option value="gp" {{ $normalizeType($type) === 'gp' ? 'selected' : '' }}>GP Surgery & Clinics</option>
                    <option value="care+home" {{ $normalizeType($type) === 'carehome' ? 'selected' : '' }}>Care Homes</option>
                    <option value="hospital" {{ $normalizeType($type) === 'hospital' ? 'selected' : '' }}>Hospitals & Urgent Care</option>
                    <option value="community+care" {{ $normalizeType($type) === 'communitycare' ? 'selected' : '' }}>Community & At-Home Care</option>
                    <option value="dentist" {{ $normalizeType($type) === 'dentist' ? 'selected' : '' }}>Dentists & Oral Health</option>
                    <option value="hospice" {{ $normalizeType($type) === 'hospice' ? 'selected' : '' }}>Hospices</option>
                    <option value="mental_health" {{ $normalizeType($type) === 'mentalhealth' ? 'selected' : '' }}>Mental Health Services</option>
                    <option value="ambulance" {{ $normalizeType($type) === 'ambulance' ? 'selected' : '' }}>Ambulance Services</option>
                    <option value="independent_clinic" {{ $normalizeType($type) === 'independentclinic' ? 'selected' : '' }}>Independent Clinics</option>
                    <option value="rehab" {{ $normalizeType($type) === 'rehab' ? 'selected' : '' }}>Substance Misuse & Rehab</option>
                </select>
            </div>

            <!-- CQC Quality Rating Select -->
            <div class="flex flex-col gap-1.5">
                <label for="search-overallRating" class="text-xs font-bold text-[#4c6272]">Overall Rating</label>
                <select name="overallRating" id="search-overallRating" class="w-full bg-white border border-[#D8DDE0] rounded-xl px-3.5 py-2 text-sm text-[#212B32] focus:outline-none focus:border-[#005EB8] focus:ring-1 focus:ring-[#005EB8]/20 transition">
                    <option value="">All Ratings</option>
                    @foreach($ratings as $rating)
                        <option value="{{ $rating }}" {{ \Illuminate\Support\Str::slug($overallRating) === \Illuminate\Support\Str::slug($rating) ? 'selected' : '' }}>{{ $rating }}</option>
                    @endforeach
                </select>
            </div>

            <!-- Local Authority Autocomplete -->
            <div class="flex flex-col gap-1.5 relative">
                <label for="search-localAuthority" class="text-xs font-bold text-[#4c6272]">Local Authority</label>
                <div class="relative w-full">
                    <input type="text" autocomplete="off" name="localAuthority" id="search-localAuthority" value="{{ $localAuthority }}" placeholder="e.g. Merton, Leeds" class="w-full bg-white border border-[#D8DDE0] rounded-xl pl-3.5 pr-9 py-2 text-sm text-[#212B32] placeholder-slate-400 focus:outline-none focus:border-[#005EB8] focus:ring-1 focus:ring-[#005EB8]/20 transition">
                    <button id="clear-localAuthority" type="button" class="absolute right-3 top-1/2 -translate-y-1/2 text-[#768e9a] hover:text-[#212B32] focus:outline-none hidden">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>
                
                <!-- Custom Autocomplete Dropdown Panel -->
                <div id="la-suggestions-list" class="absolute top-full left-0 right-0 z-30 mt-1 max-h-60 overflow-y-auto rounded-xl bg-white border border-[#D8DDE0] shadow-lg hidden divide-y divide-[#E8EDEE]">
                </div>
            </div>

            <!-- Form Submissions Actions -->
            <div class="col-span-2 lg:col-span-1 flex items-center gap-3">
                <button type="submit" class="w-full bg-[#005EB8] hover:bg-[#002F6C] text-white font-bold text-sm rounded-xl py-2 px-4 shadow-sm transition duration-200 cursor-pointer h-[38px] flex items-center justify-center gap-1.5">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 0 1-.659 1.591l-5.432 5.432a2.25 2.25 0 0 0-.659 1.591v2.927a2.25 2.25 0 0 1-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 0 0-.659-1.591L3.659 7.409A2.25 2.25 0 0 1 3 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0 1 12 3Z" />
                    </svg>
                    Filter
                </button>
                <a href="{{ $endpoint === 'providers' ? route('providers.index') : route('locations.index') }}" class="bg-[#F0F4F5] hover:bg-[#E8EDEE] text-[#212B32] font-semibold text-sm rounded-xl py-2 px-4 border border-[#D8DDE0] transition duration-200 flex items-center justify-center h-[38px]">
                    Reset
                </a>
            </div>
        </form>
    </div>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById('global-search-form');
        if (!form) return;

        form.addEventListener('submit', function(event) {
            event.preventDefault();

            const endpointSelect = document.getElementById('search-endpoint');
            const endpoint = endpointSelect ? endpointSelect.value : 'locations';

            const typeSelect = document.getElementById('search-type');
            const type = typeSelect ? typeSelect.value : 'any';

            const ratingSelect = document.getElementById('search-overallRating');
            const ratingVal = ratingSelect ? ratingSelect.value : '';

            const authorityInput = document.getElementById('search-localAuthority');
            const authorityVal = authorityInput ? authorityInput.value : '';

            // Helper to slugify rating and authority matching Laravel's Str::slug
            const slugify = function(text) {
                if (!text) return 'all';
                return text.toString().toLowerCase()
                    .replace(/[^a-z0-9\s-]/g, '') // remove special chars
                    .trim()
                    .replace(/[\s_]+/g, '-')       // replace spaces/underscores with hyphens
                    .replace(/-+/g, '-');          // replace multiple hyphens with single hyphen
            };

            const ratingSlug = slugify(ratingVal);
            const authoritySlug = slugify(authorityVal);

            const basePath = "{{ url('/') }}";
            window.location.href = basePath.replace(/\/$/, '') + '/' + endpoint + '/' + encodeURIComponent(type) + '/' + encodeURIComponent(ratingSlug) + '/' + encodeURIComponent(authoritySlug) + '/1';
        });

        // Custom Local Authority Autocomplete Suggestions
        const input = document.getElementById('search-localAuthority');
        const suggestionsList = document.getElementById('la-suggestions-list');
        const localAuthorities = @json($localAuthorities);
        let activeIndex = -1;

        if (input && suggestionsList) {
            const renderSuggestions = function(matches) {
                suggestionsList.innerHTML = '';
                if (matches.length === 0) {
                    suggestionsList.classList.add('hidden');
                    return;
                }

                matches.forEach((match, index) => {
                    const item = document.createElement('div');
                    item.className = 'px-4 py-2 text-sm text-[#212B32] hover:bg-[#F0F4F5] hover:text-[#005EB8] cursor-pointer transition-colors duration-150';
                    item.textContent = match;
                    item.dataset.index = index;
                    
                    item.addEventListener('click', function() {
                        input.value = match;
                        suggestionsList.classList.add('hidden');
                        input.focus();
                    });

                    suggestionsList.appendChild(item);
                });

                suggestionsList.classList.remove('hidden');
                activeIndex = -1;
            };

            input.addEventListener('input', function() {
                // Only trigger suggestions if input is currently focused by user interaction
                if (document.activeElement !== input) {
                    return;
                }

                const value = input.value.trim().toLowerCase();
                if (!value) {
                    suggestionsList.classList.add('hidden');
                    return;
                }

                const matches = localAuthorities.filter(la => 
                    la.toLowerCase().includes(value)
                ).slice(0, 10);

                renderSuggestions(matches);
            });

            // Keyboard navigation
            input.addEventListener('keydown', function(e) {
                const items = suggestionsList.querySelectorAll('div');
                if (items.length === 0) return;

                if (e.key === 'ArrowDown') {
                    e.preventDefault();
                    activeIndex = (activeIndex + 1) % items.length;
                    highlightItem(items);
                } else if (e.key === 'ArrowUp') {
                    e.preventDefault();
                    activeIndex = (activeIndex - 1 + items.length) % items.length;
                    highlightItem(items);
                } else if (e.key === 'Enter') {
                    if (activeIndex > -1 && activeIndex < items.length) {
                        e.preventDefault();
                        items[activeIndex].click();
                    }
                } else if (e.key === 'Escape') {
                    suggestionsList.classList.add('hidden');
                }
            });

            const highlightItem = function(items) {
                items.forEach((item, index) => {
                    if (index === activeIndex) {
                        item.classList.add('bg-[#F0F4F5]', 'text-[#005EB8]', 'font-semibold');
                        item.scrollIntoView({ block: 'nearest' });
                    } else {
                        item.classList.remove('bg-[#F0F4F5]', 'text-[#005EB8]', 'font-semibold');
                    }
                });
            };

            // Hide dropdown on click outside
            document.addEventListener('click', function(e) {
                if (!input.contains(e.target) && !suggestionsList.contains(e.target)) {
                    suggestionsList.classList.add('hidden');
                }
            });

            // Show suggestions on focus if there is value
            input.addEventListener('focus', function() {
                const value = input.value.trim().toLowerCase();
                if (value) {
                    const matches = localAuthorities.filter(la => 
                        la.toLowerCase().includes(value)
                    ).slice(0, 10);
                    renderSuggestions(matches);
                }
            });

            // Clear Local Authority Button Logic
            const clearBtn = document.getElementById('clear-localAuthority');
            if (clearBtn) {
                const toggleClearBtn = function() {
                    if (input.value.trim().length > 0) {
                        clearBtn.classList.remove('hidden');
                    } else {
                        clearBtn.classList.add('hidden');
                    }
                };

                // Initial check
                toggleClearBtn();

                input.addEventListener('input', toggleClearBtn);

                clearBtn.addEventListener('click', function() {
                    input.value = '';
                    clearBtn.classList.add('hidden');
                    if (suggestionsList) {
                        suggestionsList.classList.add('hidden');
                    }
                    input.focus();
                });
            }
        }
    });
    </script>

    @if(request()->routeIs('locations.show') || request()->routeIs('providers.show'))
    <!-- Pre-fill form from sessionStorage when viewing details -->
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const isProvider = {{ request()->routeIs('providers.show') ? 'true' : 'false' }};
        const storageKey = isProvider ? 'last_search_providers_url' : 'last_search_locations_url';
        const lastUrl = sessionStorage.getItem(storageKey);
        if (lastUrl) {
            try {
                // Parse the URL path (excluding domain if relative)
                const urlPath = lastUrl.startsWith('http') ? new URL(lastUrl).pathname : lastUrl.split('?')[0];
                const parts = urlPath.replace(/^\//, '').split('/');
                
                // Parts structure: [endpoint, type, rating, authority, page]
                if (parts.length >= 5) {
                    const type = decodeURIComponent(parts[1]);
                    const rating = decodeURIComponent(parts[2]);
                    const authority = decodeURIComponent(parts[3]);

                    // 1. Set endpoint select
                    const endpointSelect = document.getElementById('search-endpoint');
                    if (endpointSelect) {
                        endpointSelect.value = isProvider ? 'providers' : 'locations';
                    }

                    // 2. Set type select
                    const typeSelect = document.getElementById('search-type');
                    if (typeSelect && type !== 'any') {
                        // Handle potential space vs plus mismatch
                        for (let option of typeSelect.options) {
                            if (option.value.replace('+', ' ') === type.replace('+', ' ')) {
                                option.selected = true;
                                break;
                            }
                        }
                    }

                    // 3. Set rating select
                    const ratingSelect = document.getElementById('search-overallRating');
                    if (ratingSelect && rating !== 'all') {
                        // Helper to slugify option values
                        const slugify = function(text) {
                            return text.toString().toLowerCase()
                                .replace(/[^a-z0-9\s-]/g, '')
                                .trim()
                                .replace(/[\s_]+/g, '-')
                                .replace(/-+/g, '-');
                        };
                        for (let option of ratingSelect.options) {
                            if (slugify(option.value) === rating) {
                                option.selected = true;
                                break;
                            }
                        }
                    }

                    // 4. Set local authority input
                    const authorityInput = document.getElementById('search-localAuthority');
                    if (authorityInput && authority !== 'all') {
                        // Normalize local authority from slug back to display casing
                        const localAuthorities = @json($localAuthorities);
                        const slugify = function(text) {
                            return text.toString().toLowerCase()
                                .replace(/[^a-z0-9\s-]/g, '')
                                .trim()
                                .replace(/[\s_]+/g, '-')
                                .replace(/-+/g, '-');
                        };
                        let matched = authority.replace(/-/g, ' ');
                        for (let la of localAuthorities) {
                            if (slugify(la) === authority) {
                                matched = la;
                                break;
                            }
                        }
                        authorityInput.value = matched;
                        authorityInput.dispatchEvent(new Event('input'));
                    }
                }
            } catch (e) {
                console.error("Failed to parse search URL from storage:", e);
            }
        }
    });
    </script>
    @endif