@section('css')
    <link href="https://cdn.jsdelivr.net/npm/suneditor@latest/dist/css/suneditor.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/suneditor@latest/dist/suneditor.min.js"></script>
@endsection

@props(['id', 'form_id', 'value' => null])


<textarea id="{{ $id }}" {{ $attributes }}>
       {{ $value }}
</textarea>


<script>
    editTextEditor = '';
    document.addEventListener('DOMContentLoaded', () => {
        const editor = SUNEDITOR.create(document.getElementById('{{ $id }}'), {
            defaultStyle: 'font-family: Arial, sans-serif; font-size: 14px;',
            buttonList: [
                ['undo', 'redo', 'font', 'fontSize', 'formatBlock'],
                ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
                ['fontColor', 'hiliteColor', 'textStyle', 'removeFormat'],
                ['align', 'list', 'lineHeight', 'table', 'link', 'image'],
                ['fullScreen', 'showBlocks', 'codeView']
            ],
            table: {
                maxWidth: '100%',
                maxHeight: '300px',
                resize: true
            },
            font: [
                'Arial', 'Comic Sans MS', 'Courier New', 'Georgia', 'Tahoma', 'Trebuchet MS',
                'Verdana'
            ],
            fontSize: [
                '8', '10', '12', '14', '16', '18', '20', '24', '28', '32', '36'
            ],
            colorList: null,
            mode: 'classic',
            height: '200px'
        });
        editTextEditor= editor;


        // Sync the editor content to the textarea before form submission
        const form = document.querySelector('#{{ $form_id }}');
        form.addEventListener('submit', (event) => {

            $('#{{ $form_id }}').find('#{{ $id }}').val(editor.getContents());
        });
    });
</script>