@push('css')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css"
        rel="stylesheet" />
    <style>
        .select2-container--bootstrap-5 .select2-selection {
            min-height: 42px;
            border: 1px solid #ced4da;
            border-radius: 0.375rem;
        }

        .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
            line-height: 40px;
            padding-left: 12px;
        }

        .btn-action-group {
            background: #f8f9fa;
            border-top: 1px solid #dee2e6;
            padding: 20px;
            margin: 20px -20px -20px;
        }
    </style>
@endpush

@push('js')
    <script>
        // languages
        const lang_select_category = "@lang('labels.select_category')";
        const lang_add_new_category = "@lang('labels.add_new_category')";
        const lang_category_name = "@lang('labels.category_name')";
        const lang_category_name_required = "@lang('labels.category_name_required')";
        const lang_save_category = "@lang('labels.save_category')";
        const lang_category_added_successfully = "@lang('labels.category_added_successfully')";
        const lang_select_or_create_category = "@lang('labels.select_or_create_category')";
        const lang_saving = "@lang('labels.saving')";
        const lang_error_occurred = "@lang('labels.error_occurred')";
        // languages
        const canCreateCategories = @json($canCreate);
        const name_field = "{{ $name }}";
        const createCategoryUrl = "{{ $createUrl }}";
    </script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="{{ asset('assets/custom/js/common/select2-with-add-button.js') }}"></script>
    <script>
        function initCategorySelect() {
            const categorySelect = $('select[name="{{ $name }}"]');

            // Configure select2
            categorySelect.select2({
                theme: "bootstrap-5",
                placeholder: `${lang_select_category}`,
                allowClear: true,
                width: "100%",
                dropdownParent: categorySelect.closest(".modal").length
                ? categorySelect.closest(".modal")
                    : document.body,
                    escapeMarkup: function (markup) {
                    return markup;
                },
                templateResult: function (data) {
                    if (data.loading) return data.text;
                    return $("<span>").text(data.text);
                },
                templateSelection: function (data) {
                    return $("<span>").text(data.text);
                },
            });

            // Add "Add New Category" button to dropdown
            categorySelect.on("select2:open", function () {
                if (
                $(this).prop("disabled") ||
                (typeof isReadonly !== "undefined" && isReadonly)
                ) {
                return;
                }

                // Add button after a short delay to ensure dropdown is rendered
                setTimeout(() => {
                const dropdown = $(".select2-container--bootstrap-5 .select2-dropdown");

                // Remove existing button if any
                dropdown.find(".add-category-btn-container").remove();

                // Create button container
                const buttonContainer = $(
                    '<div class="add-category-btn-container p-2 border-top">',
                );

                if(canCreateCategories)
                {
                    // Create button
                    const addButton = $(
                    '<button type="button" onclick="showAddCategoryModal()" class="btn btn-sm btn-outline-primary w-100">',
                    ).html(`<i class="fas fa-plus me-1"></i> ${lang_add_new_category}`);

                    // Add click event
                    addButton.on("click", function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                    });

                    // Append button to container and container to dropdown
                    buttonContainer.append(addButton);
                }

                dropdown.append(buttonContainer);
                }, 100);
            });
        }

        initCategorySelect();

        // Disable form elements in readonly mode
        @if(isset($readonly) && $readonly)
            document.querySelectorAll('input, select, textarea, button').forEach(element => {
                element.setAttribute('readonly', true);
                element.setAttribute('disabled', true);
            });
            $('#{{ $name }}').select2('enable', false);
            $('.select2-selection').css('background-color', '#e9ecef');
        @endif

        // initCategorySelect


    </script>
@endpush
<div class="mb-3 row">
    <label for="{{ $name }}" class="col-md-2 col-form-label">
        {{ $label ?? __('labels.category') }}
        @if($required) <span class="text-danger">*</span> @endif
    </label>
    <div class="col-md-10">
        <div class="input-group">
            <select class="form-control select2 @error($name) is-invalid @enderror" name="{{ $name }}" id="{{ $name }}" {{ isset($readonly) && $readonly ? "disabled" : "" }} required>
                <option value="">{{ __('labels.select_category') }}</option>
                @foreach($categoryList as $key => $value)
                    <option value="{{$key}}" {{ old($name, $selectedValue ?? '') == $key ? 'selected' : '' }}>{{ $value }}
                    </option>
                @endforeach
            </select>
            @if(!isset($readonly) || (isset($readonly) && !$readonly))
                @if($canCreate)
                    <button type="button" class="btn btn-outline-secondary" onclick="showAddCategoryModal()"
                        data-toggle="tooltip" data-placement="top" data-bs-toggle="tooltip"
                        title="{{ __('labels.add_new_category') }}">
                        <i class="fas fa-plus"></i>
                    </button>
                @endif
            @endif
        </div>
        @error($name)
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror


        @if($canCreate)
            <small class="text-muted">{{ __('labels.select_or_create_category') }}</small>
        @endif
    </div>
</div>