{{-- CKeditor --}}
@php
    $fieldId = uniqid(str()->slug($field['name']));
@endphp

@include('crud::fields.inc.wrapper_start')
<div>
    <label class="form-label mb-3">{!! $field['label'] !!}</label>
    @include('crud::fields.inc.translatable_icon')
    <textarea name="{{ $field['name'] }}" class="d-none" data-init-function="bqFieldInitQuillElement" id="{{ $fieldId }}"
        @include('crud::fields.inc.attributes') bp-field-main-input>{{ old_empty_or_null($field['name'], '') ?? ($field['value'] ?? ($field['default'] ?? '')) }}</textarea>

    <div class="quill-container">
        <div class="sub-quill-container">
            <div id="editor-{{ $fieldId }}">
                {!! old_empty_or_null($field['name'], '') ?? ($field['value'] ?? ($field['default'] ?? '')) !!}
            </div>
        </div>
    </div>
    {{-- HINT --}}
    @if (isset($field['hint']))
        <p class="help-block">{!! $field['hint'] !!}</p>
    @endif
</div>
@include('crud::fields.inc.wrapper_end')


{{-- ########################################## --}}
{{-- Extra CSS and JS for this particular field --}}
{{-- If a field type is shown multiple times on a form, the CSS and JS will only be loaded once --}}
@push('crud_fields_styles')
    @loadOnce('quillFieldStyle')
        <link href="https://cdn.jsdelivr.net/npm/quill@2.0.0-rc.2/dist/quill.snow.css" rel="stylesheet" />
        <style type="text/css">
            .quill-container {
                height: 595px;
                padding: 0px 0px 0;
                border: 1px solid var(--bs-gray-300);
                border-radius: .475rem;
            }

            .quill-container.quill-container-small {
                height: 195px;
            }

            .quill-container .sub-quill-container {
                display: flex;
                flex-flow: column;
                height: 100%;
            }

            .quill-container .sub-quill-container .ql-toolbar {
                border: none;
                position: static;
                border-bottom: 1px solid var(--bs-gray-300);
            }

            .quill-container .sub-quill-container .ql-container {
                flex: 2 1;
                overflow: hidden;
                border: none;
            }

            .quill-container .sub-quill-container .ql-editor {
                overflow-y: auto;
            }
        </style>
    @endLoadOnce
@endpush
{{-- FIELD JS - will be loaded in the after_scripts section --}}
@push('crud_fields_scripts')
    <!-- Include stylesheet -->
    <!-- Include the Quill library -->
    <script src="https://cdn.jsdelivr.net/npm/quill@2.0.0-rc.2/dist/quill.js"></script>
    @loadOnce('bqFieldInitQuillElement')
        <script>
            function bqFieldInitQuillElement(element) {
                var qlEditorSize = $(element).data('ql-editor-size');
                if (qlEditorSize) {
                    console.log(qlEditorSize);
                    $(element).next().addClass('quill-container-' + qlEditorSize);
                }
                var qlToolBarConfig = $(element).data('ql-toolbar');
                if (qlToolBarConfig == 'short') {
                    var toolbarOptions = [
                        ['bold', 'italic', 'underline', 'strike', 'link'], // toggled buttons
                    ];
                } else {
                    var toolbarOptions = [
                        ['bold', 'italic', 'underline', 'strike', 'link'], // toggled buttons
                        ['blockquote', 'code-block'],

                        [{
                            'header': 1
                        }, {
                            'header': 2
                        }], // custom button values
                        [{
                            'list': 'ordered'
                        }, {
                            'list': 'bullet'
                        }, {
                            'list': 'check'
                        }],
                        [{
                            'script': 'sub'
                        }, {
                            'script': 'super'
                        }], // superscript/subscript
                        [{
                            'indent': '-1'
                        }, {
                            'indent': '+1'
                        }], // outdent/indent
                        [{
                            'direction': 'rtl'
                        }], // text direction

                        [{
                            'size': ['small', false, 'large', 'huge']
                        }], // custom dropdown
                        [{
                            'header': [1, 2, 3, 4, 5, 6, false]
                        }],

                        [{
                            'color': []
                        }, {
                            'background': []
                        }], // dropdown with defaults from theme
                        [{
                            'font': []
                        }],
                        [{
                            'align': []
                        }],

                        ['clean'] // remove formatting button
                    ];
                }

                var elId = $(element).attr('id');
                const quill = new Quill('#editor-' + elId, {
                    modules: {
                        toolbar: toolbarOptions
                    },
                    theme: 'snow'
                });
                quill.on('text-change', function(delta, oldDelta, source) {
                    console.log(elId);
                    document.getElementById(elId).value = quill.root.innerHTML;
                });
            }
        </script>
    @endLoadOnce
@endpush

{{-- End of Extra CSS and JS --}}
{{-- ########################################## --}}