@include('documentcreator::templates.fields.settings.common', [
    'required' => 1
])

<hr/ >

@include('documentcreator::templates.fields.settings.placeholder')

<hr/ >

<div class="form_group w-full lg:w-[60%] flex flex-col lg:flex-row gap-2 lg:gap-0 justify-between items-starts">
    <div class="form-label text-sm-semibold w-full lg:w-1/2">&nbsp;</div>
    <div class="w-full lg:w-1/2">
        <div class="flex justify-start items-center gap-2">
            <input name="allow_multiple" id="allow_multiple" type="checkbox" value="1" {{isset($settings->display_as) && $settings->display_as == "dropdown-multi" ? "checked" : ""}}>
            <label for="allow_multiple" class="m-0">{{__('forms.lbl_allow_multiple_selections')}}</label>
        </div>
    </div>
</div>
<hr/ >

<div class="form_group w-full lg:w-[100%] flex flex-col lg:flex-row gap-2 lg:gap-0 justify-between items-start">
    <div class="form-label text-sm-semibold w-full lg:w-[30%]">{{trans("forms.lbl_options")}}</div>
    <div class="w-full lg:w-[70%]">
        <div class="repeater border px-3" data-isFirstItemUndeletable="1">
            <div data-repeater-list="options">
                @if(isset($settings->options) && is_array($settings->options))
                    @foreach ($settings->options as $key => $option)
                        <div data-repeater-item class="border-b border-custom-grey-200 py-3 field-option" data-index="{{ $key }}">
                            <div class="flex items-center justify-start">
                                <div>
                                    <div class="form-label text-sm-semibold">
                                        &nbsp;
                                    </div>
                                    <input
                                        class="{{isset($settings->display_as) && $settings->display_as == "dropdown-multi" ? "" : "radio-option"}}"
                                        name="checked" type="{{isset($settings->display_as) && $settings->display_as == "dropdown-multi" ? "checkbox" : "radio"}}"
                                        value="1"
                                        {{isset($option['checked']) && $option['checked'] ? "checked" : ""}}>
                                </div>
                                <div class="ml-2">
                                    <div class="form-label text-sm-semibold">{{ __('forms.lbl_input_label') }}</div>
                                    <textarea name="label" class="w-full form-input text-md-regular text-custom-grey-500">{{isset($option['label']) && $option['label'] ? $option['label'] : ''}}</textarea>
                                </div>
                                <div class="ml-4">
                                    <div class="form-label text-sm-semibold">
                                        {{ __('forms.lbl_input_value') }}
                                    </div>
                                    <textarea name="name" class="w-full form-input text-md-regular text-custom-grey-500">{{isset($option['name']) && $option['name'] ? $option['name'] : ''}}</textarea>
                                </div>

                                <button data-repeater-delete type="button" class="btn-tertiary-sm delete-task repeater-delete-btn ml-2">
                                    <x-svg-icon icon="icon-trash" width="20" height="20" />
                                </button>
                            </div>
                            <div class="mx-4 px-2 pr-4 mt-4">
                                <div class="form-label text-sm-semibold">{{ __('forms.lbl_description') }}</div>
                                <textarea name="description" class="w-full form-input text-md-regular text-custom-grey-500 document-builder-editor-text-area">{{isset($option['description']) && $option['description'] ? $option['description'] : ''}}</textarea>
                            </div>

                            <div class="mx-4 px-2 pr-4 mt-4 has-danger has-gallery">
                                <input
                                    id="gallery-{{ $key }}"
                                    name="gallery"
                                    type="hidden"
                                    autocomplete="off"
                                    value="{{isset($option['gallery']) && $option['gallery'] ? $option['gallery'] : ''}}">
                                <button
                                    data-id="gallery-{{ $key }}"
                                    data-input="gallery-{{ $key }}"
                                    data-preview="gallery-preview-container-{{ $key }}"
                                    type="button"
                                    class="btn-secondary-sm gallery-manager-btn"
                                    >
                                    {{ __('forms.lbl_gallery') }}
                                </button>
                                <div
                                    id="gallery-preview-container-{{ $key }}"
                                    class="gallery-preview-container columns-1 lg:columns-3 gap-4 hidden mt-4">

                                    </div>
                            </div>

                        </div>
                    @endforeach
                @else
                    <div data-repeater-item class="border-b border-custom-grey-200 py-3 field-option">
                        <div class="flex items-center justify-start">
                            <div>
                                <div class="form-label text-sm-semibold">
                                    &nbsp;
                                </div>
                                <input class="radio-option" name="checked" type="radio" value="1">
                            </div>
                            <div class="ml-2">
                                <div class="form-label text-sm-semibold">{{ __('forms.lbl_label') }}</div>
                                <textarea name="label" class="w-full form-input text-md-regular text-custom-grey-500">Option 0</textarea>
                            </div>

                            <div class="ml-4">
                                <div class="form-label text-sm-semibold">{{ __('forms.lbl_value') }}</div>
                                <textarea name="name" class="w-full form-input text-md-regular text-custom-grey-500">option-0</textarea>
                            </div>

                            <button data-repeater-delete type="button" class="btn-tertiary-sm delete-task repeater-delete-btn ml-2">
                                <x-svg-icon icon="icon-trash" width="20" height="20" />
                            </button>
                        </div>
                        <div class="mx-4 px-2 pr-4 mt-4">
                            <div class="form-label text-sm-semibold">{{ __('forms.lbl_description') }}</div>
                            <textarea name="description" class="w-full form-input text-md-regular text-custom-grey-500 document-builder-editor-text-area">{{isset($option['description']) && $option['description'] ? $option['description'] : ''}}</textarea>
                        </div>

                        <div class="mx-4 px-2 pr-4 mt-4 has-danger has-gallery">
                            <input
                                id="gallery-0"
                                name="gallery"
                                type="hidden"
                                autocomplete="off"
                                value="">
                            <button
                                data-id="gallery-0"
                                data-input="gallery-0"
                                data-preview="gallery-preview-container-0"
                                type="button"
                                class="btn-secondary-sm gallery-manager-btn"
                                >
                                {{ __('forms.lbl_gallery') }}
                            </button>
                            <div
                                id="gallery-preview-container-0"
                                class="gallery-preview-container columns-1 lg:columns-3 gap-4 hidden mt-4">

                                </div>
                        </div>
                    </div>
                @endif

            </div>

            <button data-repeater-create type="button" class="flex items-center gap-2 text-custom-orange-500 text-sm-semibold btn-option mt-4 mb-2">