{{--
    Select2-Alpine Component
    ======================
    A reusable select component that combines Select2 with Alpine.js for enhanced select functionality.
    This component mimics Vue's v-select behavior and provides additional features.

    Props:
    -------
    name: string - Name attribute for the select element
    id: string - ID attribute for the select element
    options: array - Array of options in format [{id: value, text: label}]
    selected: string|array - Currently selected value(s)
    placeholder: string - Placeholder text
    multiple: boolean - Enable multiple selection
    disabled: boolean - Disable the select
    required: boolean - Make the select required
    searchable: boolean - Enable search functionality
    clearable: boolean - Show clear button
    model: string - Alpine.js model name for two-way binding
    url: string - API endpoint for AJAX loading
    minInputLength: number - Minimum characters to trigger search
    delay: number - Delay in milliseconds for search debouncing

    Usage Examples:
    --------------
    1. Basic Usage:
    <x-select2-alpine
        name="vehicle_id"
        id="vehicle_id"
        :options="$vehicles"
        selected="1"
        placeholder="Select a vehicle"
    />

    2. With AJAX Loading:
    <x-select2-alpine
        name="vehicle_id"
        id="vehicle_id"
        url="/api/vehicles"
        minInputLength="2"
        delay="300"
        placeholder="Search vehicles..."
    />

    3. Multiple Selection:
    <x-select2-alpine
        name="vehicles[]"
        id="vehicles"
        :options="$vehicles"
        :selected="[1, 2, 3]"
        multiple
        placeholder="Select vehicles"
    />

    4. With Alpine.js Model:
    <div x-data="{ selectedVehicle: '' }">
        <x-select2-alpine
            name="vehicle_id"
            id="vehicle_id"
            :options="$vehicles"
            x-model="selectedVehicle"
        />
    </div>

    5. With Event Handling:
    <x-select2-alpine
        name="vehicle_id"
        id="vehicle_id"
        :options="$vehicles"
        @select2-change="handleChange($event.detail)"
        @select2-open="handleOpen"
        @select2-close="handleClose"
        @select2-clear="handleClear"
    />

    Events:
    -------
    select2-change: Emitted when selection changes
        - detail.value: Selected value(s)
        - detail.text: Selected text(s)
    select2-open: Emitted when dropdown opens
    select2-close: Emitted when dropdown closes
    select2-clear: Emitted when selection is cleared

    Dependencies:
    ------------
    - Select2 4.1.0-rc.0
    - Alpine.js
    - jQuery (required by Select2)

    Notes:
    ------
    - For AJAX loading, the API should return data in format:
        {
            data: [{id: value, text: label}],
            next_page_url: string|null
        }
    - The component automatically handles cleanup on destroy
    - All Select2 options are supported through the props
--}}

@props([
    'name' => '',
    'id' => '',
    'options' => [],
    'selected' => '',
    'placeholder' => 'Select an option',
    'multiple' => false,
    'disabled' => false,
    'required' => false,
    'searchable' => true,
    'clearable' => true,
    'model' => '',
    'url' => '',
    'minInputLength' => 0,
    'delay' => 250
])

<div x-data="select2Alpine({
    name: @js($name),
    id: @js($id),
    options: @js($options),
    selected: @js($selected),
    placeholder: @js($placeholder),
    multiple: @js($multiple),
    disabled: @js($disabled),
    required: @js($required),
    searchable: @js($searchable),
    clearable: @js($clearable),
    model: @js($model),
    url: @js($url),
    minInputLength: @js($minInputLength),
    delay: @js($delay)
})"
    x-init="initSelect2"
    class="select2-alpine-component">
    <select x-ref="select"
            :name="name"
            :id="id"
            :multiple="multiple"
            :disabled="disabled"
            :required="required"
            class="form-select"
            style="width: 100%;">
        @if(!$multiple)
            <option value="">{{ $placeholder }}</option>
        @endif
        <template x-for="option in options" :key="option.id">
            <option :value="option.id" :selected="isSelected(option.id)">
                <span x-text="option.text"></span>
            </option>
        </template>
    </select>
</div>

@push('scripts')
<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('select2Alpine', (config) => ({
        name: config.name,
        id: config.id,
        options: config.options,
        selected: config.selected,
        placeholder: config.placeholder,
        multiple: config.multiple,
        disabled: config.disabled,
        required: config.required,
        searchable: config.searchable,
        clearable: config.clearable,
        model: config.model,
        url: config.url,
        minInputLength: config.minInputLength,
        delay: config.delay,
        select2: null,
        searchTimeout: null,

        initSelect2() {
            const self = this;
            
            this.select2 = $(this.$refs.select).select2({
                placeholder: this.placeholder,
                allowClear: this.clearable,
                minimumInputLength: this.minInputLength,
                width: '100%',
                disabled: this.disabled,
                multiple: this.multiple,
                ajax: this.url ? {
                    url: this.url,
                    dataType: 'json',
                    delay: this.delay,
                    data: function(params) {
                        return {
                            search: params.term,
                            page: params.page || 1
                        };
                    },
                    processResults: function(data, params) {
                        params.page = params.page || 1;
                        return {
                            results: data.data,
                            pagination: {
                                more: data.next_page_url ? true : false
                            }
                        };
                    },
                    cache: true
                } : null
            });

            // Handle select2 change event
            this.select2.on('change', (e) => {
                const value = this.multiple ? this.select2.val() : this.select2.val()[0];
                this.selected = value;
                
                // Emit Alpine.js event
                this.$dispatch('select2-change', {
                    value: value,
                    text: this.select2.find('option:selected').text()
                });
            });

            // Handle select2 open event
            this.select2.on('select2:open', () => {
                this.$dispatch('select2-open');
            });

            // Handle select2 close event
            this.select2.on('select2:close', () => {
                this.$dispatch('select2-close');
            });

            // Handle select2 clear event
            this.select2.on('select2:clear', () => {
                this.selected = this.multiple ? [] : '';
                this.$dispatch('select2-clear');
            });

            // Watch for external changes to selected value
            this.$watch('selected', (value) => {
                if (this.select2.val() !== value) {
                    this.select2.val(value).trigger('change');
                }
            });
        },

        isSelected(id) {
            if (this.multiple) {
                return Array.isArray(this.selected) && this.selected.includes(id);
            }
            return this.selected === id;
        },

        destroy() {
            if (this.select2) {
                this.select2.select2('destroy');
            }
        }
    }));
});
</script>
@endpush

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
@endpush