@props([
    'name' => '',
    'label' => '',
    'options' => [],
    'selected' => [],
    'required' => false,
    'class' => '',
    'col' => 'col-md-6',
])

@php
    $selected = (array) ($selected ?? []);
    $options = $options instanceof \Illuminate\Support\Collection ? $options->toArray() : (array) $options;

    $orderedOptions = [];

    // Step 1: Reorder selected options first
    foreach ($selected as $key) {
        if (isset($options[$key])) {
            $orderedOptions[$key] = $options[$key];
            unset($options[$key]);
        }
    }

    // Step 2: Append remaining options
    $orderedOptions += $options;
@endphp

<div class="{{ $col }}">
    <label for="{{ $name }}" class="form-label">{!! $label !!}</label>

    <select
        name="{{ $name }}[]"
        id="{{ $name }}"
        class="form-control ordered-select {{ $class }} @error($name) is-invalid @enderror"
        multiple
        {{ $required ? 'required' : '' }}
    >
        @foreach ($orderedOptions as $value => $optionLabel)
            <option value="{{ $value }}" {{ in_array($value, $selected) ? 'selected' : '' }}>
                {{ $optionLabel }}
            </option>
        @endforeach
    </select>

    @error($name)
        <span class="text-danger">{{ $message }}</span>
    @enderror
</div>

@once
    <!-- Select2 CSS & JS -->
    {{-- <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script> --}}

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const selects = document.querySelectorAll('select.ordered-select');

            selects.forEach(select => {
                const $select = $(select);
                let selectedValues = $select.val() || [];

                $select.select2({
                    width: '100%',
                    placeholder: 'Select ...'
                });

                // Reapply selection order on change
                $select.on('select2:select', function (e) {
                    const val = e.params.data.id;
                    if (!selectedValues.includes(val)) {
                        selectedValues.push(val);
                    }
                    reorderOptions();
                });

                $select.on('select2:unselect', function (e) {
                    const val = e.params.data.id;
                    selectedValues = selectedValues.filter(v => v !== val);
                    reorderOptions();
                });

                function reorderOptions() {
                    selectedValues.forEach(val => {
                        const option = $select.find(`option[value="${val}"]`);
                        $select.append(option);
                    });

                    $select.find('option').each(function () {
                        const val = $(this).val();
                        $(this).prop('selected', selectedValues.includes(val));
                    });

                    $select.trigger('change.select2');
                }

                // Initial ordering
                reorderOptions();
            });
        });
    </script>
@endonce