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

<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">
                            <div class="flex items-center justify-start">
                                <div>
                                    <div>&nbsp;</div>
                                    <input name="checked" type="checkbox" value="1" {{(isset($option['checked']) && $option['checked'] ? "checked" : "")}}>
                                </div>

                                <div class="ml-2">
                                    <div class="form-label">
                                        {{ __('forms.lbl_label') }}
                                    </div>
                                    {{-- <input type="text" name="label" class="w-full form-input text-md-regular text-custom-grey-500" value="{{isset($option['label']) && $option['label'] ? $option['label'] : ''}}"> --}}
                                    <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">
                                        {{ __('forms.lbl_label') }}
                                    </div>
                                    {{-- <input type="text" name="name" class="w-full form-input text-md-regular text-custom-grey-500" value="{{isset($option['name']) && $option['name'] ? $option['name'] : ''}}"> --}}
                                    <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 btn-sm btn-icon btn-inverse-danger btn-rounded ml-3">
                                    <i class="mdi mdi-minus"></i>
                                </button>
                            </div>
                            <div class="mx-4 px-2 pr-4 mt-4">
                                <label for="field-desc">
                                    {{ __('forms.lbl_description') }}
                                </label>
                                <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 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">
                                    &nbsp;
                                </div>
                                <input name="checked" type="checkbox" value="1">
                            </div>
                            <div class="ml-2">
                                <div class="form-label">
                                    {{ __('forms.lbl_label') }}
                                </div>
                                {{-- <input type="text" name="label" class="w-full form-input text-md-regular text-custom-grey-500" value="Option 0"> --}}
                                <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">
                                    {{ __('forms.lbl_label') }}
                                </div>
                                {{-- <input type="text" name="name" class="w-full form-input text-md-regular text-custom-grey-500" value="option-0"> --}}
                                <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 btn-sm btn-icon btn-inverse-danger btn-rounded ml-3">
                                <i class="mdi mdi-minus"></i>
                            </button>
                        </div>
                        <div class="mx-4 px-2 pr-4 mt-4">
                            <div class="form-label">
                                {{ __('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="btn btn-link btn-sm btn-option mt-4 mb-2">
                <i class="mdi mdi-plus"></i> {{__('forms.lbl_add_option')}}
            </button>

        </div>

    </div>
</div>