@php
    $canonical = config('plocal.public_url').'/find-businesses/';
    $awardLabels = [
        'business_of_the_day' => 'Current PLOCAL Business of the Day',
        'business_of_the_month' => 'Current PLOCAL Business of the Month',
        'business_of_the_year' => 'Current PLOCAL Business of the Year',
    ];
    // Contextual Previous/Next: each "View Profile" link carries the exact
    // filters/page that produced this result set, so the Profile page can
    // reconstruct the identical filtered/ordered neighbor query. Only real,
    // non-empty filter values are included (no noisy empty params).
    $profileContext = $results !== null
        ? '?'.http_build_query(array_filter(array_merge(
            ['from' => 'find-businesses'],
            $filters,
            ['page' => $results->currentPage()]
        ), fn ($value) => $value !== null && $value !== ''))
        : '';
@endphp
@extends('layouts.public')

@section('title', 'Find Businesses | PLOCAL')
@section('description', 'Search PLOCAL-evaluated local businesses by category, state, city, and ZIP code.')
@section('robots', 'noindex, follow')
@section('canonical', $canonical)
@section('image', config('plocal.public_url').'/assets/img/og-meta/plocal-find-businesses.png')
@section('body-class', 'plocal-service-market-page plocal-find-businesses-page')
@section('body-attributes')data-render-source="new_model" data-page="find-businesses"@endsection

@push('styles')
    <link rel="stylesheet" href="/assets/css/pages/plocal-server-rendered.css">
    <link rel="stylesheet" href="/assets/css/pages/find-businesses.css">
@endpush

@section('content')
    @include('public.partials.site-header')
    <main id="main-content">
        <section class="plocal-market-masthead" aria-labelledby="find-businesses-title">
            <div class="container">
                <div class="plocal-market-masthead__grid">
                    <p class="plocal-market-masthead__eyebrow">PLOCAL / Find Businesses</p>
                    <h1 id="find-businesses-title">Find <span>Evaluated Local Businesses</span></h1>
                    <p class="plocal-market-masthead__summary">Search PLOCAL-evaluated businesses by category, state, city, and ZIP code. Results are shown in a neutral order — never by score, votes, or awards.</p>
                    <div class="plocal-market-masthead__bottom">
                        <nav aria-label="Breadcrumb"><ol class="plocal-breadcrumb"><li><a href="/">Home</a></li><li aria-current="page">Find Businesses</li></ol></nav>
                    </div>
                </div>
            </div>
        </section>

        <section class="plocal-market-section" aria-labelledby="find-businesses-filters-title">
            <div class="container">
                <h2 id="find-businesses-filters-title" class="sr-only">Search filters</h2>
                <form class="plocal-form plocal-find-businesses-form" method="get" action="{{ route('public.find-businesses.show') }}" role="search" autocomplete="off" data-find-businesses-form>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="plocal-form-group">
                                <label for="fb-category">Category</label>
                                <select id="fb-category" name="category" class="plocal-form-control" autocomplete="off">
                                    <option value="">All categories</option>
                                    @foreach ($categoryOptions as $option)
                                        <option value="{{ $option->slug }}" @selected($filters['category'] === $option->slug)>{{ $option->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="plocal-form-group">
                                <label for="fb-state">State</label>
                                <select id="fb-state" name="state" class="plocal-form-control" autocomplete="off">
                                    <option value="">All states</option>
                                    @foreach ($stateOptions as $option)
                                        <option value="{{ $option->state_code }}" @selected(strtoupper((string) $filters['state']) === $option->state_code)>{{ $option->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="plocal-form-group">
                                <label for="fb-city">City</label>
                                <input type="text" id="fb-city" name="city" class="plocal-form-control" placeholder="City" value="{{ $filters['city'] }}" maxlength="160" autocomplete="off">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="plocal-form-group">
                                <label for="fb-zip">ZIP Code</label>
                                <input type="text" id="fb-zip" name="zip" class="plocal-form-control" placeholder="12345" inputmode="numeric" maxlength="10" value="{{ $filters['zip'] }}" autocomplete="off">
                            </div>
                        </div>
                        <div class="col-md-12 plocal-find-businesses-form__actions">
                            <button type="submit" class="theme-btn"><span>Search</span></button>
                            <a href="{{ route('public.find-businesses.show') }}" class="plocal-find-businesses-form__reset">Clear filters</a>
                        </div>
                    </div>
                </form>

                @if ($inputErrors !== [] || $resolutionErrors !== [])
                    <div class="plocal-find-businesses-notice" role="alert">
                        <p>We couldn't run that search:</p>
                        <ul>
                            @foreach ($inputErrors as $field => $messages)
                                @foreach ($messages as $message) <li>{{ $message }}</li> @endforeach
                            @endforeach
                            @if (isset($resolutionErrors['category'])) <li>We don't recognize that category.</li> @endif
                            @if (isset($resolutionErrors['state'])) <li>We don't recognize that state.</li> @endif
                            @if (isset($resolutionErrors['city'])) <li>We don't recognize that city{{ isset($resolutionErrors['state']) ? '' : ' for the selected state' }}.</li> @endif
                            @if (isset($resolutionErrors['zip'])) <li>Enter a valid 5-digit ZIP or ZIP+4 code.</li> @endif
                        </ul>
                    </div>
                @endif
            </div>
        </section>

        <section class="plocal-market-section plocal-market-method" aria-labelledby="find-businesses-results-title">
            <div class="container">
                <header class="plocal-market-section-head">
                    <div class="plocal-market-section-head__title">
                        <span>Results</span>
                        <h2 id="find-businesses-results-title">
                            @if ($results !== null) {{ $results->total() }} {{ Str::plural('Business', $results->total()) }} Found @else Search Results @endif
                        </h2>
                    </div>
                </header>

                @if ($results !== null && $results->isNotEmpty())
                    <div class="plocal-market-method__grid">
                        @foreach ($results as $business)
                            <article class="plocal-market-method__item">
                                <div class="plocal-find-businesses-card-media">
                                    @if (!empty($business['screenshot_reference_public_id']))
                                        <img src="{{ route('public.profiles.screenshot', [$business['profile_slug'], $business['screenshot_reference_public_id']]) }}" alt="Submitted website screenshot for {{ $business['display_name'] }}" loading="lazy" width="534" height="323">
                                    @else
                                        <div class="plocal-find-businesses-card-fallback" aria-hidden="true"><span>PLOCAL</span><small>Evaluated business</small></div>
                                    @endif
                                </div>
                                <span>{{ $business['category_label'] }}</span>
                                <h3><a href="{{ $business['profile_url'] }}{{ $profileContext }}">{{ $business['display_name'] }}</a></h3>
                                <p>
                                    <i class="fas fa-location-dot" aria-hidden="true"></i>
                                    {{ $business['city'] }}, {{ $business['state'] }}
                                    @if ($business['zip']) &middot; {{ $business['zip'] }} @endif
                                </p>
                                @if ($business['current_award'] !== null)
                                    <p class="plocal-find-businesses-badge">{{ $awardLabels[$business['current_award']['level']] ?? 'Currently recognized by PLOCAL' }}</p>
                                @endif
                                <a class="plocal-market-profile-link" href="{{ $business['profile_url'] }}{{ $profileContext }}">View Profile <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
                            </article>
                        @endforeach
                    </div>
                    <nav class="plocal-find-businesses-pagination" aria-label="Search results pages">
                        @if ($results->hasMorePages())
                            <a class="plocal-find-businesses-load-more" href="{{ $results->nextPageUrl() }}">View more businesses <i class="far fa-arrow-right" aria-hidden="true"></i></a>
                        @endif
                        {{ $results->links() }}
                    </nav>
                @elseif ($inputErrors === [] && $resolutionErrors === [])
                    <p class="plocal-find-businesses-empty">No businesses match those filters yet. Try a different category, state, city, or ZIP code.</p>
                @endif
            </div>
        </section>
    </main>
    @section('footer-note', 'Find Businesses shows only PLOCAL-evaluated businesses with complete, published discovery data.')
@include('public.partials.site-footer')
@endsection

@push('scripts')
    <script>
        (() => {
            const form = document.querySelector('[data-find-businesses-form]');
            if (!form) return;

            // Browsers may restore a previous form state after navigation. The
            // query string is authoritative for this GET search surface, so
            // re-apply it once the page is ready.
            const syncFieldsFromUrl = () => {
                const params = new URLSearchParams(window.location.search);
                ['category', 'state', 'city', 'zip'].forEach((name) => {
                    const field = form.elements.namedItem(name);
                    if (field) field.value = params.get(name) ?? '';
                });
            };

            syncFieldsFromUrl();
            // Chrome can restore form controls after the document scripts run.
            // Re-sync on pageshow and one short deferred tick so the URL remains
            // the authoritative state after browser autofill restoration.
            window.addEventListener('pageshow', syncFieldsFromUrl);
            window.setTimeout(syncFieldsFromUrl, 250);

            form.addEventListener('submit', () => {
                // Empty optional fields must not produce noisy query keys.
                ['category', 'state', 'city', 'zip'].forEach((name) => {
                    const field = form.elements.namedItem(name);
                    if (field && !field.value.trim()) field.disabled = true;
                });
            });
        })();
    </script>
@endpush