@props(['selectedId' => null, 'selectedDisplay' => ''])

<div class="position-relative"
     x-data="{
         searchValue: '{{ $selectedDisplay }}',
         selectedInvoiceId: '{{ $selectedId }}',
         searchResults: [],
         isSearching: false,
         isInvoiceSelected: {{ $selectedId ? 'true' : 'false' }},
         cancelToken: null,

         // Search function with cancellation
         async searchInvoices() {
             if (this.cancelToken) {
                 this.cancelToken.cancel('New request made');
             }

             if (this.isInvoiceSelected || !this.searchValue.trim()) {
                 this.searchResults = [];
                 return;
             }

             this.isSearching = true;
             this.cancelToken = axios.CancelToken.source();

             try {
                 const response = await axios.get('{{ route('invoices.search') }}', {
                     params: { search_value: this.searchValue },
                     cancelToken: this.cancelToken.token
                 });
                 this.searchResults = response.data;
             } catch (error) {
                 if (!axios.isCancel(error)) {
                     console.error('Search error:', error);
                     this.searchResults = [];
                 }
             } finally {
                 this.isSearching = false;
             }
         },

         // Handle selection
         selectInvoice(invoice) {
             this.searchValue = invoice.display_number;
             this.selectedInvoiceId = invoice.id;
             this.isInvoiceSelected = true;
             this.searchResults = [];
             this.$dispatch('invoice-selected', invoice);
         },

         // Handle clear
         clearSelection() {
             this.searchValue = '';
             this.selectedInvoiceId = '';
             this.isInvoiceSelected = false;
             this.searchResults = [];
             this.$dispatch('invoice-selected', null);
         }
     }"
>
    <!-- Hidden input to submit the actual invoice ID -->
    <input type="hidden" name="invoice_id" x-model="selectedInvoiceId" />

    <!-- Search Input Group -->
    <label for="invoice_search" class="form-label">Invoice (Optional)</label>
    <div class="input-group">
        <input
            type="text"
            id="invoice_search"
            class="form-control"
            x-model="searchValue"
            @input.debounce.500ms="searchInvoices"
            placeholder="Type invoice number..."
            :disabled="isInvoiceSelected"
            autocomplete="off"
        />
        <button 
            type="button" 
            class="btn btn-outline-secondary" 
            x-show="isInvoiceSelected" 
            @click="clearSelection" 
            title="Clear Selection"
        >
            <i class="uil uil-times"></i>
        </button>
    </div>

    <!-- Loading State -->
    <div x-show="isSearching" class="mt-2 text-muted fs-9">Searching...</div>

    <!-- Results List (Dropdown styling) -->
    <template x-if="searchResults.length">
        <ul class="list-group position-absolute w-100 mt-1 shadow-sm" style="z-index: 1000; max-height: 200px; overflow-y: auto;">
            <template x-for="invoice in searchResults" :key="invoice.id">
                <li
                    class="list-group-item list-group-item-action py-2 fs-9"
                    @click="selectInvoice(invoice)"
                    x-text="invoice.display_number"
                    style="cursor: pointer;"
                ></li>
            </template>
        </ul>
    </template>

    <!-- Empty State -->
    <div x-show="!searchResults.length && searchValue.trim() && !isInvoiceSelected && !isSearching"
         class="mt-2 text-muted fs-9">
        No invoices found
    </div>
</div>