@props([
    'placeholder' => 'Search...',
    'value' => null,
    'target' => 'table-results',
])

@php
    $value = $value ?? request('q');
@endphp

<div
    class="relative"
    x-data="{
        q: @js($value ?? ''),
        target: @js($target),
        searching: false,
        async search() {
            const url = new URL(window.location.href);
            if (this.q.trim()) {
                url.searchParams.set('q', this.q.trim());
            } else {
                url.searchParams.delete('q');
            }
            url.searchParams.delete('page');
            url.searchParams.delete('ajax');

            this.searching = true;
            try {
                const response = await fetch(url.toString(), {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'text/html',
                    },
                });
                const html = await response.text();
                const target = document.getElementById(this.target);
                if (target) {
                    target.innerHTML = html;
                }

                window.history.replaceState({}, '', url.toString());
            } finally {
                this.searching = false;
                this.$nextTick(() => {
                    const input = this.$refs.input;
                    if (input) {
                        input.focus();
                        const len = input.value.length;
                        input.setSelectionRange(len, len);
                    }
                });
            }
        }
    }"
>
    <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-4.35-4.35M11 19a8 8 0 100-16 8 8 0 000 16z" />
        </svg>
    </span>
    <input
        x-ref="input"
        type="search"
        x-model="q"
        @input.debounce.400ms="search()"
        @keydown.enter.prevent="search()"
        placeholder="{{ $placeholder }}"
        class="block w-full rounded-lg border border-gray-200 bg-white py-2.5 pl-10 pr-10 text-sm text-gray-800 shadow-sm placeholder:text-gray-400 focus:border-[#C5181E] focus:outline-none focus:ring-1 focus:ring-[#C5181E]"
        autocomplete="off"
    >
    <span
        x-show="searching"
        x-cloak
        class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400"
    >
        <svg class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
        </svg>
    </span>
</div>