@props([
    'model',
    'options',
    'placeholder' => 'Select an option...',
    'label'       => 'label',
    // 'subtext'     => 'subtext',
    'onClick' => '',
    'newClick' => '',
])

<div 
    x-data="{ 
        open: false, 
        search: '',

        get filteredOptions() {
            if (!this.search) return {{ $options }};
            return {{ $options }}.filter(i => 
                String(i.{{ $label }}).toLowerCase().includes(this.search.toLowerCase())
            );
        },
        get selectedLabel() {
            let found = {{ $options }}.find(i => i.id == {{ $model }});
            return found ? found.{{ $label }} : '{{ $placeholder }}';
        }
    }"
    class="dropdown custom-fleet-select w-100"
    @click.away="open = false"
>
    <div 
        @click="open = !open" 
        class="form-control d-flex justify-content-between align-items-center bg-white shadow-sm"
        :class="open ? 'border-primary ring-1' : 'border-light-subtle'"
        style="cursor: pointer; height: 45px; border-radius: 8px;"
    >
        <span x-text="selectedLabel" :class="{{ $model }} ? 'text-dark fw-medium' : 'text-muted'"></span>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="ph ph-caret-down text-muted transition" :style="open ? 'transform: rotate(180deg)' : ''" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
        </svg>
    </div>

    <div 
        x-show="open" 
        x-transition:enter="transition ease-out duration-100"
        x-transition:enter-start="opacity-0 transform scale-95"
        x-transition:enter-end="opacity-100 transform scale-100"
        class="dropdown-menu show w-100 shadow border-0 mt-2 p-0 overflow-hidden"
        style="display: none; border-radius: 12px; z-index: 1050;"
    >
        <div class="p-3 bg-light border-bottom">
            <div class="input-group input-group-sm border rounded-pill bg-white px-2">
                <span class="input-group-text bg-transparent border-0 text-muted">
                    <i class="ph ph-magnifying-glass"></i>
                </span>
                <input 
                    x-model="search"
                    type="text" 
                    class="form-control border-0 shadow-none py-2" 
                    placeholder="Type to search..."
                    @click.stop
                >
            </div>
        </div>

        <div class="list-group list-group-flush overflow-auto" style="max-height: 280px;">
            <template x-for="item in filteredOptions" :key="item.id">
                <button 
                    type="button"
                    @click="{{ $model }} = item.id; open = false; search = '';"
                    class="list-group-item list-group-item-action border-0 d-flex justify-content-between align-items-start py-3 px-4"
                    :class="{{ $model }} == item.id ? 'bg-primary-subtle border-start border-primary border-4' : ''"
                >
                    <div class="d-flex flex-column">
                        <span class="fw-bold text-dark" x-text="item.{{ $label }}"></span>
                        {{-- <template x-if="item.{{ $subtext }}">
                            <small class="text-muted mt-1" x-text="item.{{ $subtext }}"></small>
                        </template> --}}
                    </div>
                    
                    <template x-if="item.badge">
                        <span :class="'badge rounded-pill ' + (item.badge_class || 'bg-secondary')" x-text="item.badge"></span>
                    </template>
                </button>
            </template>

            <div x-show="filteredOptions.length === 0" class="p-4 text-center">
                <p class="text-muted mb-0 small">No matching results found</p>
                @if($newClick != '' && $newClick != null)
                    <button class="mt-3 btn btn-sm btn-outline-success rounded-pill" type="button" @click="{{ $newClick }}"><i class="ph-duotone ph-plus-circle me-2"></i>Create</button>
                @endif
            </div>
        </div>
    </div>
</div>

<style>
    .custom-fleet-select .transition { transition: all 0.2s ease-in-out; }
    .custom-fleet-select .list-group-item-action:hover {
        background-color: #f8f9fa;
    }
    /* Simple fix to prevent the search input from getting focus outline in Bootstrap */
    .custom-fleet-select .form-control:focus {
        box-shadow: none;
    }
</style>