{{--
    Address autocomplete partial (Nominatim / OpenStreetMap — no API key required)
    Variables:
      $fieldName    — name attribute of the hidden input (default: 'address')
      $labelText    — overrides the label (optional)
      $initialValue — pre-filled value from DB / old()
--}}

@once
<style>
.addr-results {
    position: absolute;
    z-index: 50;
    width: 100%;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: .5rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1);
    margin-top: 2px;
    max-height: 240px;
    overflow-y: auto;
}
.dark .addr-results { background: #374151; border-color: #4b5563; }
.addr-item { padding: .45rem .75rem; font-size: .78rem; cursor: pointer; line-height: 1.35; border-bottom: 1px solid #f3f4f6; }
.dark .addr-item { border-color: #4b5563; }
.addr-item:last-child { border-bottom: none; }
.addr-item:hover, .addr-item.addr-active { background: #eef2ff; }
.dark .addr-item:hover, .dark .addr-item.addr-active { background: #312e81; }
</style>

<script>
function addrLookup() {
    return {
        query: '',
        results: [],
        idx: -1,
        busy: false,
        open: false,
        _timer: null,

        init() {
            this.query = this.$el.dataset.initial || '';
        },

        schedule() {
            clearTimeout(this._timer);
            if (this.query.trim().length < 3) { this.results = []; this.open = false; return; }
            this._timer = setTimeout(() => this.search(), 450);
        },

        async search() {
            this.busy = true;
            try {
                const url = 'https://nominatim.openstreetmap.org/search?format=json&limit=6&addressdetails=1&q='
                    + encodeURIComponent(this.query.trim());
                const res = await fetch(url, { headers: { 'Accept-Language': 'nl,fr,en;q=0.8' } });
                this.results = await res.json();
                this.idx = -1;
                this.open = this.results.length > 0;
            } catch (e) {
                this.results = [];
                this.open = false;
            }
            this.busy = false;
        },

        pick(r) {
            const a = r.address || {};
            const road = a.road || a.pedestrian || a.footway || a.path || a.street || '';
            const no   = a.house_number || '';
            const zip  = a.postcode || '';
            const city = a.city || a.town || a.village || a.municipality || a.county || '';
            const ctry = a.country || '';
            const parts = [(road + (no ? ' ' + no : '')).trim(), zip, city, ctry].filter(Boolean);
            this.query = parts.join(', ');
            this.open  = false;
            this.results = [];
        },

        nav(dir) {
            if (!this.open || !this.results.length) return;
            this.idx = Math.max(0, Math.min(this.results.length - 1, this.idx + dir));
        },

        confirm() {
            if (this.open && this.idx >= 0 && this.results[this.idx]) {
                this.pick(this.results[this.idx]);
            } else {
                this.open = false;
            }
        },

        mapUrl() {
            const q = this.query.trim();
            return q ? 'https://www.google.com/maps/search/?api=1&query=' + encodeURIComponent(q) : '#';
        }
    };
}
</script>
@endonce

<div x-data="addrLookup()"
     data-initial="{{ $initialValue ?? '' }}">

    <x-input-label for="{{ $fieldName ?? 'address' }}_search"
                   :value="isset($labelText) ? $labelText : __('Street address')" />

    <div class="mt-1 flex items-center gap-1.5">
        {{-- Input + dropdown wrapper --}}
        <div class="relative flex-1">
            <input type="text"
                   id="{{ $fieldName ?? 'address' }}_search"
                   autocomplete="off"
                   x-model="query"
                   @input="schedule()"
                   @keydown.arrow-down.prevent="nav(1)"
                   @keydown.arrow-up.prevent="nav(-1)"
                   @keydown.enter.prevent="confirm()"
                   @keydown.escape="open = false"
                   @blur="setTimeout(() => open = false, 200)"
                   placeholder="{{ __('Search address…') }}"
                   class="block w-full border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-sm focus:ring focus:ring-indigo-200 focus:border-indigo-400 dark:bg-gray-700 dark:text-gray-100 px-3 py-2 pr-7" />

            {{-- Spinner --}}
            <span x-show="busy" style="display:none"
                  class="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-xs text-gray-400">
                <svg class="animate-spin h-3.5 w-3.5" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"/>
                </svg>
            </span>

            {{-- Dropdown --}}
            <ul x-show="open" style="display:none" class="addr-results">
                <template x-for="(r, i) in results" :key="r.place_id ?? i">
                    <li class="addr-item"
                        :class="i === idx ? 'addr-active' : ''"
                        @mousedown.prevent="pick(r)"
                        x-text="r.display_name">
                    </li>
                </template>
            </ul>
        </div>

        {{-- Google Maps link --}}
        <a x-show="query.trim().length > 2"
           :href="mapUrl()"
           target="_blank"
           rel="noopener noreferrer"
           :title="'{{ __('Show on map') }}'"
           style="display:none"
           class="shrink-0 text-gray-400 hover:text-indigo-500 transition">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
            </svg>
        </a>
    </div>

    {{-- Hidden input submitted with the form --}}
    <input type="hidden" name="{{ $fieldName ?? 'address' }}" x-bind:value="query">

    <x-input-error :messages="$errors->get($fieldName ?? 'address')" class="mt-1" />
</div>