@props([
    'name',
    'label' => '',
    'id' => null,
    'options' => [],
    'value' => null,
    'col' => 3,
    'multi' => false,
    'required' => null,
    'relation' => 'name',
    'ajax_url' => null,
    'ajax_params' => 'q',
    'ajax_extra_params' => [],
    'searchable' => false,
])

@php
    $fieldId = $id ?? $name;

    if (is_bool($value)) {
        $selectedValue = $value ? '1' : '0';
    } elseif (is_object($value)) {
        $selectedValue = $value->id ?? null;
    } elseif (is_array($value)) {
        $selectedValue = null;
    } else {
        $selectedValue = $value;
    }

    $selectedText = is_object($value)
        ? ($value->$relation ?? $value->name ?? $value->title ?? $value->text ?? '')
        : (is_string($value) ? $value : '');
@endphp

<div class="col-md-{{ $col }}">
    <label for="{{ $fieldId }}" class="form-label">
        {{ $label }}
        @if($required)
            <span class="text-danger">*</span>
        @endif
    </label>

    <select
        name="{{ $name }}{{ $multi ? '[]' : '' }}"
        id="{{ $fieldId }}"
        class="form-select form-select-sm {{ $searchable ? 'select2-search' : '' }}"
        {{ $multi ? 'multiple' : '' }}
        {{ $required ? 'required' : '' }}>
        <option value="" disabled {{ $selectedValue === null ? 'selected' : '' }} hidden>
            {{ __('dashboard.select') }} {{ $label }}
        </option>

        @foreach ($options as $key => $text)
            <option value="{{ $key }}"
                {{ $selectedValue != null && (string)$selectedValue === (string)$key ? 'selected' : '' }}>
                {{ $text }}
            </option>
        @endforeach
    </select>

    <div class="invalid-feedback"></div>
    @foreach($errors->get($name) as $message)
        <span class="text-danger">
            <small class="errorTxt">{{ $message }}</small>
        </span>
    @endforeach
</div>

@if ($ajax_url)
    @push('scripts')
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            let selectEl = $('#{{ $fieldId }}');
            let extraParams = @json($ajax_extra_params ?? []);

            let select = selectEl.select2({
                placeholder: "{{ __('dashboard.select') }} {{ $label }}",
                allowClear: true,
                width: '100%',
                ajax: {
                    url: "{{ $ajax_url }}",
                    dataType: "json",
                    delay: 300,
                    data: function (params) {
                        let extra = {};
                        let hasEmptyDependency = false;

                        Object.keys(extraParams).forEach(key => {
                            let value = $(extraParams[key]).val();
                            if (!value) {
                                hasEmptyDependency = true;
                            }
                            extra[key] = value;
                        });

                        if (hasEmptyDependency) {
                            return false;
                        }

                        return {
                            "{{ $ajax_params }}": params.term,
                            ...extra
                        };
                    },
                    processResults: function (data) {
                        selectEl.prop('disabled', false);
                        return { results: data };
                    }
                }
            });

            Object.values(extraParams).forEach(selector => {
                $(document).on('change', selector, function () {
                    let hasValue = true;

                    Object.values(extraParams).forEach(depSelector => {
                        if (!$(depSelector).val()) {
                            hasValue = false;
                        }
                    });

                    selectEl.val(null).trigger('change');
                    selectEl.find('option').remove();

                    if (hasValue) {
                        selectEl.prop('disabled', false);
                    } else {
                        selectEl.prop('disabled', true);
                    }
                });
            });

            @if($value)
            let option = new Option(
                "{{ $selectedText }}",
                "{{ $selectedValue }}",
                true,
                true
            );
            select.append(option).trigger('change');
            selectEl.prop('disabled', false);
            @else
            if (Object.keys(extraParams).length > 0) {
                selectEl.prop('disabled', true);
            }
            @endif
        });
    </script>
    @endpush
@elseif ($searchable)
    @push('scripts')
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            if (!$('#{{ $fieldId }}').data('select2')) {
                $('#{{ $fieldId }}').select2({
                    placeholder: "{{ __('dashboard.select') }} {{ $label }}",
                    allowClear: true,
                    width: '100%'
                });
            }
        });
    </script>
    @endpush
@endif