@extends('tenant.layouts.admin')

{{--Tilte Section--}}
@section('title', 'Marketing Template')

{{--Style Section--}}
@section('style')
    <!-- include summernote css/js -->
    <link href="{{global_asset('vendor/summernote/summernote-lite.min.css')}}" rel="stylesheet">
    <style>

    </style>
@endsection

{{--Content Section--}}
@section('content')
    <div class="container-fluid">
        @include('tenant.admin.notifications.filter.filter')
        <livewire:tenant.admin.notifications.marketing.index />
    </div>
@endsection

{{--Script Section--}}
@section('script')
{{--    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>--}}
{{--    <script src="{{global_asset('vendor/summernote/summernote-lite.min.js')}}"></script>--}}
{{--    <script src="{{global_asset('vendor/summernote/summernote-ext-rtl.js')}}"></script>--}}

<script src="https://cdn.ckeditor.com/ckeditor5/41.4.2/super-build/ckeditor.js"></script>

<script>

    var editor2 = '1-0';
    window.addEventListener('getEditor', event => {
        if (document.querySelector('#body-2')) {

            CKEDITOR.ClassicEditor.create(document.querySelector('#body-2'), {
                toolbar: {
                    items: [
                        'link','undo', 'redo',
                        {
                            label: 'Font',
                            withText: true,
                            items: ['heading', '|', 'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'highlight' ]
                        },
                        '|',
                        {
                            label: 'A drop-down with a custom icon',
                            icon: '<svg viewBox="0 0 68 64" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M43.71 11.025a11.508 11.508 0 0 0-1.213 5.159c0 6.42 5.244 11.625 11.713 11.625.083 0 .167 0 .25-.002v16.282a5.464 5.464 0 0 1-2.756 4.739L30.986 60.7a5.548 5.548 0 0 1-5.512 0L4.756 48.828A5.464 5.464 0 0 1 2 44.089V20.344c0-1.955 1.05-3.76 2.756-4.738L25.474 3.733a5.548 5.548 0 0 1 5.512 0l12.724 7.292z" fill="#FFF"/><path d="M45.684 8.79a12.604 12.604 0 0 0-1.329 5.65c0 7.032 5.744 12.733 12.829 12.733.091 0 .183-.001.274-.003v17.834a5.987 5.987 0 0 1-3.019 5.19L31.747 63.196a6.076 6.076 0 0 1-6.037 0L3.02 50.193A5.984 5.984 0 0 1 0 45.003V18.997c0-2.14 1.15-4.119 3.019-5.19L25.71.804a6.076 6.076 0 0 1 6.037 0L45.684 8.79zm-29.44 11.89c-.834 0-1.51.671-1.51 1.498v.715c0 .828.676 1.498 1.51 1.498h25.489c.833 0 1.51-.67 1.51-1.498v-.715c0-.827-.677-1.498-1.51-1.498h-25.49.001zm0 9.227c-.834 0-1.51.671-1.51 1.498v.715c0 .828.676 1.498 1.51 1.498h18.479c.833 0 1.509-.67 1.509-1.498v-.715c0-.827-.676-1.498-1.51-1.498H16.244zm0 9.227c-.834 0-1.51.671-1.51 1.498v.715c0 .828.676 1.498 1.51 1.498h25.489c.833 0 1.51-.67 1.51-1.498v-.715c0-.827-.677-1.498-1.51-1.498h-25.49.001zm41.191-14.459c-5.835 0-10.565-4.695-10.565-10.486 0-5.792 4.73-10.487 10.565-10.487C63.27 3.703 68 8.398 68 14.19c0 5.791-4.73 10.486-10.565 10.486v-.001z" fill="#1EBC61" fill-rule="nonzero"/><path d="M60.857 15.995c0-.467-.084-.875-.251-1.225a2.547 2.547 0 0 0-.686-.88 2.888 2.888 0 0 0-1.026-.531 4.418 4.418 0 0 0-1.259-.175c-.134 0-.283.006-.447.018-.15.01-.3.034-.446.07l.075-1.4h3.587v-1.8h-5.462l-.214 5.06c.319-.116.682-.21 1.089-.28.406-.071.77-.107 1.088-.107.218 0 .437.021.655.063.218.041.413.114.585.218s.313.244.422.419c.109.175.163.391.163.65 0 .424-.132.745-.396.961a1.434 1.434 0 0 1-.938.325c-.352 0-.656-.1-.912-.3-.256-.2-.43-.453-.523-.762l-1.925.588c.1.35.258.664.472.943.214.279.47.514.767.706.298.191.63.339.995.443.365.104.749.156 1.151.156.437 0 .86-.064 1.272-.193.41-.13.778-.323 1.1-.581a2.8 2.8 0 0 0 .775-.981c.193-.396.29-.864.29-1.405h-.001z" fill="#FFF" fill-rule="nonzero"/></g></svg>',
                            items: [ 'bold', 'italic', 'strikethrough', 'underline', 'code', 'subscript', 'superscript' ]
                        },
                        '|',
                        {
                            label: 'Insert',
                            icon: 'plus',
                            items: ['link', 'uploadImage', 'blockQuote', 'insertTable', 'mediaEmbed', 'codeBlock', 'htmlEmbed']
                        },
                        '|',

                        {
                            // This dropdown has the icon disabled and a text label instead.
                            label: 'Align',
                            icon: false,
                            items: [ 'textPartLanguage','alignment','outdent', 'indent']
                        },
                        {
                            // This dropdown has the icon disabled and a text label instead.
                            label: 'Lists',
                            icon: false,
                            items: [ 'bulletedList', 'numberedList', 'todoList' ]
                        },


                        '|',
                        'exportWord', '|',

                        '|',

                        'sourceEditing','specialCharacters', 'horizontalLine', 'pageBreak'

                    ],
                    shouldNotGroupWhenFull: false
                },
                list: {
                    properties: {
                        styles: true,
                        startIndex: true,
                        reversed: true
                    }
                },
                heading: {
                    options: [
                        { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
                        { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
                        { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
                        { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
                        { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
                        { model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' },
                        { model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' }
                    ]
                },
                fontFamily: {
                    options: [
                        'default',
                        'Arial, Helvetica, sans-serif',
                        'Courier New, Courier, monospace',
                        'Georgia, serif',
                        'Lucida Sans Unicode, Lucida Grande, sans-serif',
                        'Tahoma, Geneva, sans-serif',
                        'Times New Roman, Times, serif',
                        'Trebuchet MS, Helvetica, sans-serif',
                        'Verdana, Geneva, sans-serif',
                        'Roboto, sans-serif',
                        'Open Sans, sans-serif',
                        'Montserrat, sans-serif',
                        'Lato, sans-serif',
                        'Oswald, sans-serif',
                        'PT Sans, sans-serif',
                        'Nunito, sans-serif',
                        'Raleway, sans-serif',
                        'Playfair Display, serif',
                        'Merriweather, serif',
                    ],
                    supportAllValues: false
                },
                fontSize: {
                    options: [ 10, 12, 14, 'default', 18, 20, 22 ],
                    supportAllValues: true
                },
                htmlSupport: {
                    allow: [
                        {
                            name: /.*/,
                            attributes: true,
                            classes: true,
                            styles: true
                        }
                    ]
                },
                htmlEmbed: {
                    showPreviews: true
                },
                link: {
                    decorators: {
                        addTargetToExternalLinks: true,
                        defaultProtocol: 'https://',
                        toggleDownloadable: {
                            mode: 'manual',
                            label: 'Downloadable',
                            attributes: {
                                download: 'file'
                            }
                        }
                    }
                },
                mention: {
                    feeds: [
                        {
                            marker: '@',
                            feed: [
                                '@apple', '@bears', '@brownie', '@cake', '@cake', '@candy', '@canes', '@chocolate', '@cookie', '@cotton', '@cream',
                                '@cupcake', '@danish', '@donut', '@dragée', '@fruitcake', '@gingerbread', '@gummi', '@ice', '@jelly-o',
                                '@liquorice', '@macaroon', '@marzipan', '@oat', '@pie', '@plum', '@pudding', '@sesame', '@snaps', '@soufflé',
                                '@sugar', '@sweet', '@topping', '@wafer'
                            ],
                            minimumCharacters: 1
                        }
                    ]
                },
                removePlugins: [
                    'AIAssistant',
                    'CKBox',
                    'CKFinder',
                    'EasyImage',
                    'MultiLevelList',
                    'RealTimeCollaborativeComments',
                    'RealTimeCollaborativeTrackChanges',
                    'RealTimeCollaborativeRevisionHistory',
                    'PresenceList',
                    'Comments',
                    'TrackChanges',
                    'TrackChangesData',
                    'RevisionHistory',
                    'Pagination',
                    'WProofreader',
                    'MathType',
                    'SlashCommand',
                    'Template',
                    'DocumentOutline',
                    'FormatPainter',
                    'TableOfContents',
                    'PasteFromOfficeEnhanced',
                    'CaseChange'
                ],
                language: {
                    ui: 'en',
                    content: 'en'
                },
                ckfinder: {
                    uploadUrl: '{{ route('admin.email.image') . '?_token=' . csrf_token() }}'
                },

            })
                .then(editor => {
                    if (editor2 !== '1-0') {
                        editor2.destroy().then(() => {
                            console.log('Editor deleted.');
                        });
                    }


                    editor2 = editor;

                    editor.model.document.on('change:data', () => {
                        console.log(document.querySelector('#body-2').value);
                        Livewire.emit('templateAdded', editor.getData());
                    });

                    window.addEventListener('loadSummernote', (event) => {
                        var content = event;
                        console.log(event.detail)

                        // Retrieve existing content from the editor
                        var existingContent = editor.getData();
                        var updatedContent = existingContent + content;
                        editor.setData(updatedContent);


                        // editor.setData(content);
                        document.querySelector('#body-2').value = content;
                    });
                })
                .catch(error => {
                    console.log(error.stack);
                });



        } else {
            editor.model.document.on('change:data', () => {
                console.log(document.querySelector('#body-2').value);
                Livewire.emit('openTextdata2', editor.getData());
                // Delete the existing content before inserting new content
                editor.setData('');
                // {{-- // @this.set('body', document.querySelector('#body').value) --}}
                });
            }
        });
</script>
{{--    <script>--}}
{{--        $('#summernote').summernote({--}}

{{--            tabsize: 2,--}}
{{--            height: 400,--}}
{{--            toolbar: [--}}
{{--                ['style', ['style']],--}}
{{--                ['font', ['bold', 'underline', 'clear','fontname','fontsize']],--}}
{{--                ['color', ['color']],--}}
{{--                ['para', ['ul', 'ol', 'paragraph']],--}}
{{--                ['insert',['ltr','rtl']],--}}
{{--                ['table', ['table']],--}}
{{--                ['insert', ['link', 'picture']],--}}
{{--                ['view', ['help']]--}}
{{--            ]--}}
{{--        });--}}
{{--    </script>--}}



{{--    <script>--}}
{{--        $('#summernote').on('summernote.change', function() {--}}
{{--            Livewire.emit('templateAdded',this.value)--}}
{{--            // console.log('Content has changed:', this.value);--}}
{{--        });--}}
{{--    </script>--}}

    <script>
        window.addEventListener('close-modal', event => {
            document.getElementById('closeModal').click();
        });

        window.addEventListener('clearSummernote', event => {
            var element = document.querySelector('.note-editable');
            if (element) {
                element.innerHTML = '';
            } else {
                // console.log('Element with class "my-element" not found.');
            }
        });

        window.addEventListener('loadSummernote', event => {
            var element = document.querySelector('.note-editable');
            if (element) {
                element.innerHTML = event.detail;
            } else {
                // console.log('Element with class "my-element" not found.');
            }
        });
    </script>

@endsection