@extends('tenant.layouts.supervisor')

{{-- Tilte Section --}}
@section('title', 'Email Page')

{{-- Style Section --}}
@section('style')
    <style>
        .ap {
            width: 100% !important;
            height: 60%;
        }

        .ap__ring {
            stroke: hsla(var(--hue), 10%, 10%, 0.15);
            transition: stroke 0.3s;
        }

        .ap__worm1,
        .ap__worm2 {
            animation-duration: 3s;
            animation-iteration-count: infinite;
        }

        .ap__worm1 {
            animation-name: worm1;
        }

        .ap__worm2 {
            animation-name: worm2;
            visibility: hidden;
        }

        /* Dark theme */
        @media (prefers-color-scheme: dark) {
            :root {
                --bg: hsl(var(--hue), 10%, 10%);
                --fg: hsl(var(--hue), 10%, 90%);
            }

            .ap__ring {
                stroke: hsla(var(--hue), 10%, 90%, 0.1);
            }
        }

        /* Animtions */
        @keyframes worm1 {
            from {
                animation-timing-function: ease-in-out;
                stroke-dashoffset: -87.96;
            }

            20% {
                animation-timing-function: ease-in;
                stroke-dashoffset: 0;
            }

            60% {
                stroke-dashoffset: -791.68;
                visibility: visible;
            }

            60.1%,
            to {
                stroke-dashoffset: -791.68;
                visibility: hidden;
            }
        }

        @keyframes worm2 {

            from,
            60% {
                stroke-dashoffset: -87.96;
                visibility: hidden;
            }

            60.1% {
                animation-timing-function: cubic-bezier(0, 0, 0.5, 0.75);
                stroke-dashoffset: -87.96;
                visibility: visible;
            }

            77% {
                animation-timing-function: cubic-bezier(0.5, 0.25, 0.5, 0.88);
                stroke-dashoffset: -340;
                visibility: visible;
            }

            to {
                stroke-dashoffset: -669.92;
                visibility: visible;
            }
        }


        .icons {
            margin-left: 11px !important;
            font-size: 20px;
            /* position: relative; */
            /* background-image: linear-gradient(to bottom, #02a34e, #abc959); */
            color: black;
            background-color: white;
            border: solid 1px #dbdbdb;
            border-radius: 25%;
            padding: 3px 6px 3px 9px;
            display: inline;
            cursor: pointer;
            color: gray;
        }

        .icons-2 {
            background: white;
            color: #818181;
            border: solid 1px #dbdbdb;
            border-radius: 25%;
            padding: 3px;
            display: inline-block;
        }


        .chat-active {
            background-color: #00a34e;
            color: white !important;
            border-radius: 13px;

        }

        .chat-active-text {
            color: white !important;
        }

        .list-filter {
            overflow-x: auto;
            white-space: nowrap;
        }

        .list-filter::-webkit-scrollbar {
            display: none;
        }

        .scroll_ab::-webkit-scrollbar {
            display: none;
        }

        .list-filter-icons {
            padding-top: 10px;
            height: 48px;
        }

        .counter {
            right: -25px;
            font-size: 7px;
        }

        .reply .col-auto .card {
            background-image: linear-gradient(to right, #02a34e, #abc959);
        }

        .sendMessage {
            background-image: linear-gradient(to bottom, #02a34e, #abc959);
            color: white;
            border-radius: 50%;
            border: #14e714;
        }


        .accordion-item {
            border: 0;
            /*border-bottom: 1px solid #cccccc;*/
        }

        .history-button {
            background: white;
            color: black;
            margin: auto;
            width: auto;
            border-radius: 40px;
            font-size: 10px;
        }

        .accordion-header {
            background: white;
            text-align-last: center;
            margin-top: 2px;


        }

        .accordion-item:first-of-type .accordion-button {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }

        .history-button:focus {
            z-index: 3;
            border-color: green !important;
            font-weight: bold;
            outline: 0;
            box-shadow: white !important;
        }

        .history-button:not(.collapsed) {
            color: green;
            background-color: white;
            border-color: white;
            box-shadow: white;
        }

        .form-label {
            font-size: 12px;
        }

        .form-select {
            padding: 7px 5px;
            font-size: 10px;
            border: none;
            color: black;
        }

        .form-input {
            padding: 7px 5px;
            font-size: 10px;
            border: none;
            color: black;
        }

        .history-button {
            background: white;
            color: black;
            margin: auto;
            width: auto;
            border-radius: 40px;
            font-size: 10px;
        }

        .accordion-header {
            background: white;
            text-align-last: center;
            margin-top: 2px;


        }

        .accordion-item:first-of-type .accordion-button {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }

        .history-button:focus {
            z-index: 3;
            border-color: green !important;
            font-weight: bold;
            outline: 0;
            box-shadow: white !important;
        }

        .history-button:not(.collapsed) {
            color: green;
            background-color: white;
            border-color: white;
            box-shadow: white;
        }

        .form-label {
            font-size: 12px;
            font-weight: 600;
        }

        .form-select {
            padding: 7px 5px;
            font-size: 10px;
            border: none;
            color: black;
        }

        .form-input {
            padding: 0px 0px;
            font-size: 12px;
            border: none;
            color: black;
        }

        ul.dropdown-menu.show {
            position: absolute;
            left: -3px !important;
            padding: 3px 0;
        }

        /* Chat Info */
        @media (min-width: 992px) {
            .col-lg-3-custom {
                flex: 0 0 auto;
                width: 28%;
            }

            .col-lg-6-custom {
                flex: 0 0 auto;
                width: 44%;
            }

            .col-lg-9-custom {
                flex: 0 0 auto;
                width: 71% !important;
            }
        }

        @media (min-width: 992px) {
            .col-lg-4-filter {
                flex: 0 0 auto;
                width: 30%;
            }

            .col-lg-8-filter {
                flex: 0 0 auto;
                width: 70%;
            }
        }
    </style>
    <style>
        .icon {
            height: 33px;
            background: transparent;
            opacity: 0.7;
            color: #555;
            width: 33px;
            line-height: 33px;
            cursor: pointer;
        }

        .icons.active {
            color: white;
            /* background: azure; */
            background-image: linear-gradient(to bottom, #02a34e, #abc959);
        }


        .icons:hover {
            opacity: 1;
            color: green;
        }

        .icons.active:hover {
            color: white;
        }

        .icons-2 {
            opacity: 1;
            cursor: pointer;
        }

        ul,
        ol {
            padding-left: 28px;
            color: #777;
        }

        .cont {
            width: 600px;
            max-width: 96%;
            margin: auto;
        }

        .search-bar {
            height: 33px;
            display: flex;
            width: 100%;
            max-width: 398px;
            padding-left: 2px;
            border-radius: 4px;
        }

        .search-bar input {
            width: 49%;
            height: 100%;
            border: none;
            border-radius: 9px;
            font-size: 15px;
            font-weight: 500;
            padding: 0 0 0 40px;
            box-shadow: 0 0 0 2px rgba(134, 140, 160, 0.02);
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56.966 56.966' fill='%23717790c7'%3e%3cpath d='M55.146 51.887L41.588 37.786A22.926 22.926 0 0046.984 23c0-12.682-10.318-23-23-23s-23 10.318-23 23 10.318 23 23 23c4.761 0 9.298-1.436 13.177-4.162l13.661 14.208c.571.593 1.339.92 2.162.92.779 0 1.518-.297 2.079-.837a3.004 3.004 0 00.083-4.242zM23.984 6c9.374 0 17 7.626 17 17s-7.626 17-17 17-17-7.626-17-17 7.626-17 17-17z'/%3e%3c/svg%3e");
            background-size: 14px;
            background-repeat: no-repeat;
            background-position: 16px 48%;

        }

        .search-bar input::-moz-placeholder {

            color: rgb(196, 196, 196);
            font-size: 15px;
            font-weight: 500;
        }

        .search-bar input:-ms-input-placeholder {

            color: rgb(196, 196, 196);
            font-size: 15px;
            font-weight: 500;
        }

        .search-bar input::placeholder {

            color: rgb(196, 196, 196);
            font-size: 15px;
            font-weight: 500;
        }



        .ck.ck-reset.ck-editor.ck-rounded-corners {
            height: 206px;
            position: relative;
        }

        .ck.ck-toolbar.ck-toolbar_grouping {
            border: 0;
        }

        .ck.ck-editor__top.ck-reset_all {
            position: absolute;
            /*bottom: 4px !important;*/
            /*border: 0 solid !important;*/
            /*left: 0px !important;*/
            /*height: 40px !important;*/
            /*width: 100% !important;*/
            background: white !important;
            /*padding-left: 50px !important;*/
            border-radius: 0px 0px 10px 10px !important;
            border-bottom: 0px solid #e4e4e4 !important;
            border-right: 0px solid #e4e4e4 !important;
            border-left: 0px solid #e4e4e4 !important;


        }

        .modal-body .ck.ck-editor__top.ck-reset_all {
            position: absolute;
            /*bottom: 4px !important;*/
            /*border: 0 solid !important;*/
            /*left: 0px !important;*/
            /*height: 40px !important;*/
            /*width: 100% !important;*/
            background: white !important;
            /*padding-left: 50px !important;*/
            border-radius: 0px 0px 10px 10px !important;
            border-bottom: 0px solid #e4e4e4 !important;
            border-right: 0px solid #e4e4e4 !important;
            border-left: 0px solid #e4e4e4 !important;

        }

        .ck.ck-toolbar.ck-toolbar_grouping {
            border: 0 !important;
        }

        .ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-blurred {
            min-height: 180px !important;
            border: 0px solid #e4e4e4 !important;;
            padding: 5px  !important;
            border-radius: 0 !important;
        }

        .ck.ck-balloon-panel.ck-balloon-panel_position_border-side_right.ck-powered-by-balloon {
            display: none;
        }

        .ck.ck-editor__editable.ck-focused:not(.ck-editor__nested-editable) {

            box-shadow: none !important;
            outline: none;
        }

        .ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-focused {
            min-height: 180px !important;
            border: 0px solid #e4e4e4 !important;;
            padding: 5px  !important;
            border-radius: 0 !important;
        }

        .modal-body .ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-blurred {
            min-height: 180px !important;
            border: 0px solid #e4e4e4 !important;;
            padding: 5px  !important;
            border-radius: 0 !important;
        }

        .modal-body .ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-focused {
            min-height: 180px !important;
            border: 0px solid #e4e4e4 !important;;
            padding: 5px  !important;
            border-radius: 0 !important;
        }

        button[title] {
            position: relative;
        }

        button[title]:hover::before {
            /*content: attr(title);*/

            position: absolute;
            bottom: -40px;
            /* Adjust the value to control the distance between the button and tooltip */
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.8);
            color: #fff;
            padding: 6px 10px;
            border-radius: 4px;
            white-space: nowrap;
        }

        /*.ck.ck-balloon-panel {*/

        /*    z-index: 9999999999999 !important;*/
        /*    left: 32% !important;}*/

        .form-check-input:checked {
            background-color: #00a34e;
            border-color: #00a34e;
        }

        .form-check-input:checked+label {

            color: #00a34e;
        }

        .form-control:checked {
            background-color: #00a34e;
            border-color: #00a34e;
        }

        .form-control:checked+label {

            color: #00a34e;
        }
    </style>
@endsection

{{-- Content Section --}}
@section('content')
    <div class="container-fluid">

        <livewire:tenant.supervisor.mail.header />
        <livewire:tenant.supervisor.mail.content />

    </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>
        document.addEventListener('click', function(event) {
            var cannedresponce = document.getElementById('cannedresponce');
            if (!cannedresponce.contains(event.target)) {
                Livewire.emit('closeShowCanned')
            }
        });
    </script>
{{--<script src="https://cdn.ckeditor.com/ckeditor5/40.2.0/decoupled-document/ckeditor.js"></script>--}}
{{--<script src="https://cdn.ckeditor.com/ckeditor5/41.4.2/classic/ckeditor.js"></script>--}}
<script src="https://cdn.ckeditor.com/ckeditor5/41.4.2/super-build/ckeditor.js"></script>

    <script>
        var editor2asdsa = false;
        window.addEventListener('open-text', event => {
            if (document.querySelector('#body')) {

                CKEDITOR.ClassicEditor.create(document.querySelector('#body'), {
                    toolbar: {
                        items: [
                            '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',
                        textPartLanguage: [
                            { title: 'Arabic', languageCode: 'ar' },
                            { title: 'French', languageCode: 'fr' },
                            { title: 'English', languageCode: 'en' },
                            { title: 'Spanish', languageCode: 'es' }
                        ]
                    },
                     ckfinder: {
                         uploadUrl: '{{ route('supervisor.email.image') . '?_token=' . csrf_token() }}'
                     }
                 })
                    .then(editor => {
                     editor.model.document.on('change:data', () => {

                             document.querySelector('#body').value = editor.getData();
                             console.log(editor.getData())
                             Livewire.emit('openTextdata', editor.getData());
                             {{--                            @this.set('body', document.querySelector('#body').value) --}}
                         }),
                         window.addEventListener('gitContent', (event) => {
                             var content = event.detail.content;

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


                             // editor.setData(content);
                             document.querySelector('#body').value = content;
                         });
                     window.addEventListener('gitContent2', (event) => {
                         var content = event.detail.content;

                         // 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);
                 })
            }
            document.getElementById('closeModalFilter').click();
        });



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

                CKEDITOR.ClassicEditor.create(document.querySelector('#body-2'), {
                    toolbar: {
                        items: [
                            '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',
                        textPartLanguage: [
                            { title: 'Arabic', languageCode: 'ar' },
                            { title: 'French', languageCode: 'fr' },
                            { title: 'English', languageCode: 'en' },
                            { title: 'Spanish', languageCode: 'es' }
                        ]
                    },
                     ckfinder: {
                             uploadUrl: '{{ route('supervisor.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('openTextdata2', editor.getData());
                     });

                     window.addEventListener('gitContent2', (event) => {
                         var content = event.detail.content;

                         // 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 type="module">
        window.addEventListener('close-modal-filter', event => {
            document.getElementById('closeModalFilter').click();
        });

        window.addEventListener('close-modal-data-compose', event => {
            document.getElementById('closeModalDataCompose').click();
            // document.querySelector('#body-2').innerHTML ="";
        });

        window.addEventListener('composeDataR', event => {
            document.getElementById('closeModalDataCompose').click();

        });

        window.addEventListener('closeModalNote', event => {
            document.getElementById('closeModalNote').click();
        });

        window.addEventListener('closeModalGroup', event => {
            document.getElementById('closeModalGroup').click();
        });

        window.addEventListener('inbox-scroll-down', event => {
            document.getElementById('inbox-inbox').scrollTo({
                top: -10000000000000000000000,
                left: 0,
                behavior: "smooth"
            })
        });
        window.addEventListener('inbox-scroll-down-2', event => {

            // Livewire.emit('replyShow',true)
            document.getElementById('inbox-inbox').scrollTo({
                top: 10000000000000000000000,
                left: 0,
                behavior: "smooth"
            })
            document.getElementById('replyButton').click()

        });
    </script>

    <script type="application/javascript">
        function conversationReplyState() {
            return {
                attach () {
                    document.getElementById('file_upload_id').click();
                },
                submit () {
                    this.$refs.submit.click()
                }
            }
        }
    </script>
@endsection