@section('css')
    {{-- <link href='https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css' rel='stylesheet'
        type='text/css' /> --}}

    <link rel="stylesheet" href="{{ asset('editior/css/froala_editor.css') }}">
    <link rel="stylesheet" href="{{ asset('editior/css/froala_style.css') }}">
    <link rel="stylesheet" href="{{ asset('editior/css/plugins/code_view.css') }}">
    <link rel="stylesheet" href="{{ asset('editior/css/plugins/draggable.css') }}">
    <link rel="stylesheet" href="{{ asset('editior/css/plugins/colors.css') }}">
    <link rel="stylesheet" href="{{ asset('editior/css/plugins/emoticons.css') }}">
    <link rel="stylesheet" href="{{ asset('editior/css/plugins/image_manager.css') }}">
    <link rel="stylesheet" href="{{ asset('editior/css/plugins/image.css') }}">
    <link rel="stylesheet" href="{{ asset('editior/css/plugins/line_breaker.css') }}">
    <link rel="stylesheet" href="{{ asset('editior/css/plugins/table.css') }}">
    <link rel="stylesheet" href="{{ asset('editior/css/plugins/char_counter.css') }}">
    <link rel="stylesheet" href="{{ asset('editior/css/plugins/video.css') }}">
    <link rel="stylesheet" href="{{ asset('editior/css/plugins/fullscreen.css') }}">
    <link rel="stylesheet" href="{{ asset('editior/css/plugins/file.css') }}">
    <link rel="stylesheet" href="{{ asset('editior/css/plugins/quick_insert.css') }}">
    <link rel="stylesheet" href="{{ asset('editior/css/plugins/help.css') }}">
    <link rel="stylesheet" href="{{ asset('editior/css/third_party/spell_checker.css') }}">
    <link rel="stylesheet" href="{{ asset('editior/css/plugins/special_characters.css') }}">


    <script src="{{ asset('editior/js/froala_editor.min.js') }}"></script>
    <script src="{{ asset('editior/js/plugins/align.min.js') }}"></script>
    <script src="{{ asset('editior/js/plugins/char_counter.min.js') }}"></script>
    <script src="{{ asset('editior/js/plugins/code_beautifier.min.js') }}"></script>
    <script src="{{ asset('editior/js/plugins/code_view.min.js') }}"></script>
    <script src="{{ asset('editior/js/plugins/colors.min.js') }}"></script>
    <script src="{{ asset('editior/js/plugins/draggable.min.js') }}"></script>
    <script src="{{ asset('editior/js/plugins/emoticons.min.js') }}"></script>
    <script src="{{ asset('editior/js/plugins/entities.min.js') }}"></script>
    <script src="{{ asset('editior/js/plugins/file.min.js') }}"></script>
    <script src="{{ asset('editior/js/plugins/font_size.min.js') }}"></script>
    <script src="{{ asset('editior/js/plugins/font_family.min.js') }}"></script>
    <script src="{{ asset('editior/js/plugins/fullscreen.min.js') }}"></script>
    <script src="{{ asset('editior/js/plugins/image.min.js') }}"></script>
    <script src="{{ asset('editior/js/plugins/image_manager.min.js') }}"></script>
    <script src="{{ asset('editior/js/plugins/line_breaker.min.js') }}"></script>
    <script src="{{ asset('editior/js/plugins/inline_style.min.js') }}"></script>
    <script src="{{ asset('editior/js/plugins/link.min.js') }}"></script>
    <script src="{{ asset('editior/js/plugins/lists.min.js') }}"></script>
    <script src="{{ asset('editior/js/plugins/paragraph_format.min.js') }}"></script>
    <script src="{{ asset('editior/js/plugins/paragraph_style.min.js') }}"></script>
    <script src="{{ asset('editior/js/plugins/quick_insert.min.js') }}"></script>
    <script src="{{ asset('editior/js/plugins/quote.min.js') }}"></script>
    <script src="{{ asset('editior/js/plugins/table.min.js') }}"></script>
    <script src="{{ asset('editior/js/plugins/save.min.js') }}"></script>
    <script src="{{ asset('editior/js/plugins/url.min.js') }}"></script>
    <script src="{{ asset('editior/js/plugins/video.min.js') }}"></script>
    <script src="{{ asset('editior/js/plugins/help.min.js') }}"></script>
    <script src="{{ asset('editior/js/plugins/print.min.js') }}"></script>
    <script src="{{ asset('editior/js/third_party/spell_checker.min.js') }}"></script>
    <script src="{{ asset('editior/js/plugins/special_characters.min.js') }}"></script>
    <script src="{{ asset('editior/js/plugins/word_paste.min.js') }}"></script>
@endsection

@props(['height', 'full', 'form_id', 'id', 'validate'])
<textarea {{ $attributes->merge(['id' => $id]) }}>
               
</textarea>


<script>
    var height = @json($height);
    var editor = new FroalaEditor('#{{ $id }}', {
        @if (!$full)
            toolbarButtons: {
                'moreText': {
                    'buttons': ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript',
                        'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'inlineClass',
                        'inlineStyle', 'clearFormatting'
                    ]
                },
                'moreParagraph': {
                    'buttons': ['alignLeft', 'alignCenter', 'alignRight', 'alignJustify', 'indent',
                        'outdent', 'lineHeight'
                    ]
                }
            },
            imageInsertButtons: ['imageBack', '|', 'imageUpload', 'imageByURL'],
            imageUpload: false,
            imageUploadURL: '/your-file-upload-endpoint',
        @endif

        height: height
    });
</script>

@if ($validate)
    {{-- validate --}}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var form = document.getElementById('{{ $form_id }}');
            if (form) {
                form.addEventListener('submit', function(event) {
                    var editorContent = new FroalaEditor('#{{ $id }}').html.get();
                    var validationMessage = document.querySelector('.validation-message');

                    if (editorContent.trim().length === 0) {
                        // Create a new span element for the validation message
                        var span = document.createElement('span');
                        span.textContent = 'Editor must be required';
                        span.className = 'help-block validation-message';

                        // Check if a validation message already exists
                        if (validationMessage) {
                            // Replace the existing validation message with the new one
                            validationMessage.replaceWith(span);
                        } else {
                            // Append the new validation message after the editor tag
                            var editor = document.querySelector('#{{ $id }}');
                            editor.parentNode.insertBefore(span, editor.nextSibling);
                        }

                        // Prevent form submission
                        event.preventDefault();
                    } else {
                        // Remove any existing validation message
                        if (validationMessage) {
                            validationMessage.remove();
                        }

                        // Form submission will proceed normally
                    }
                });
            }
        });
    </script>
@endif