@extends('tenant.layouts.supervisor')

{{-- Tilte Section --}}
@section('title', 'Canned Response')

{{-- Style Section --}}
@section('style')
    <!-- Css file for summernote js plugins  -->
    <link rel="stylesheet" href="{{ asset('vendor/summernote/summernote-bs4.min.css') }}">
    <style>
        .content {
            margin-left: 10px !important;
            margin-right: 10px !important;
        }

        #btnSwap:hover {
            box-shadow: 0 0.5rem 3rem #00000026 !important;
        }

        #btnSwap[title] {
            position: relative;
        }

        #btnSwap[title]:hover::before {
            content: "Swap Page";
            z-index: 99999999;
            position: absolute;
            top: -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;
        }

        #btnExcel:hover {
            box-shadow: 0 0.5rem 3rem #00000026 !important;
        }

        #btnExcel[title] {
            position: relative;
        }

        #btnExcel[title]:hover::before {
            content: "Export";
            z-index: 99999999;
            position: absolute;
            top: -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;
        }

        td,
        th {
            text-align: center;
        }

        .md-header_delete {
            background: rgb(254, 0, 0);
            background: -moz-linear-gradient(90deg, rgba(254, 0, 0, 1) 0%, rgba(255, 63, 63, 1) 32%, rgba(247, 75, 75, 1) 53%, rgba(255, 85, 85, 1) 100%);
            background: -webkit-linear-gradient(90deg, rgba(254, 0, 0, 1) 0%, rgba(255, 63, 63, 1) 32%, rgba(247, 75, 75, 1) 53%, rgba(255, 85, 85, 1) 100%);
            background: linear-gradient(90deg, rgba(254, 0, 0, 1) 0%, rgba(255, 63, 63, 1) 32%, rgba(247, 75, 75, 1) 53%, rgba(255, 85, 85, 1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fe0000", endColorstr="#ff5555", GradientType=1);

        }

        .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: -20px !important;
            border: 0 solid !important;
            left: 0px !important;
            height: 40px !important;
            width: 100% !important;
            background: white !important;
            padding-left: 80px !important;
            border-radius: 0px 0px 10px 10px !important;
            /*border-bottom: 1px solid #e4e4e4 !important;*/
            /*border-right: 1px solid #e4e4e4 !important;*/
            /*border-left: 1px solid #e4e4e4 !important;*/
            border: none !important;

        }

        .modal-body .ck.ck-editor__top.ck-reset_all {
            position: absolute;
            bottom: -25px !important;
            border: 0 solid !important;
            left: 3% !important;
            height: 40px !important;
            width: 90% !important;
            background: white !important;
            padding-left: 50px !important;
            border-radius: 0px 0px 10px 10px !important;
            /*border-bottom: 1px solid #e4e4e4 !important;*/
            /*border-right: 1px solid #e4e4e4 !important;*/
            /*border-left: 1px solid #e4e4e4 !important;*/
            border: none !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 {
            height: 166px;
            border: 1px solid #e4e4e4;
            padding: 49px 6px 6px 17px;
            border-radius: 13px 13px 0px 0px;
        }

        .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 {
            height: 166px;
            border: 1px solid #e4e4e4;
            padding: 49px 6px 6px 17px;
            border-radius: 13px 13px 0px 0px;
        }

        .modal-body .ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-blurred {
            height: 166px;
            border: 0px solid white;
            padding: 0px 0px 0px 0px;
            border-radius: 0px 0px 0px 0px;
        }

        .modal-body .ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-focused {
            height: 166px;
            border: 0px solid white;
            padding: 0px 0px 0px 0px;
            border-radius: 0px 0px 0px 0px;
        }

        .modal-dialog-scrollable {
            height: fit-content;
        }

        #button_send {
            background-image: linear-gradient(to right, #02a34e, #abc959);
            padding: 2%;
            border-radius: 50%;
            border: none;
            width: 8%;
            position: absolute;
            top: 234px;
            left: 3%;
        }

        .ck-button {
            margin-right: 3% !important;
        }

        /*.modal-dialog-scrollable .modal-body {*/
        /*    overflow-y: unset !important;*/
        /*}*/
        /*#EmailModal > div > div > div.modal-body > form > div:nth-child(3) > div > div > div.ck.ck-reset.ck-editor.ck-rounded-corners > div.ck.ck-editor__main > div {*/
        /*overflow-y: auto;*/
        /*    height: 130px !important;*/

        /*}*/
    </style>
@endsection

{{-- Content Section --}}
@section('content')
    <div class="container-fluid">
        <livewire:tenant.supervisor.canned-response.index />

    </div>
@endsection

{{-- Script Section --}}
@section('script')
    {{--    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> --}}
    {{--    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script> --}}
    {{--    <script src="{{asset('vendor/summernote/summernote-bs4.min.js')}}"></script> --}}
    {{-- <script src="https://cdn.ckeditor.com/ckeditor5/38.0.1/classic/ckeditor.js"></script> --}}
    {{-- <script src="https://cdn.ckeditor.com/ckeditor5/40.2.0/decoupled-document/ckeditor.js"></script> --}}
    {{--    <script src="https://cdn.ckeditor.com/ckeditor5/41.0.0/decoupled-document/ckeditor.js"></script> --}}
    <script src="https://cdn.ckeditor.com/ckeditor5/41.4.2/super-build/ckeditor.js"></script>


    {{-- <script>
        function downloadCSV(csv, filename) {
            var csvFile;
            var downloadLink;

            // CSV file
            csvFile = new Blob([csv], {type: "text/csv"});

            // Download link
            downloadLink = document.createElement("a");

            // File name
            downloadLink.download = filename;

            // Create a link to the file
            downloadLink.href = window.URL.createObjectURL(csvFile);

            // Hide download link
            downloadLink.style.display = "none";

            // Add the link to DOM
            document.body.appendChild(downloadLink);

            // Click download link
            downloadLink.click();
        }

        function exportTableToCSV(filename) {
            var csv = [];
            var rows = document.querySelectorAll("#cannedResponsesTable tr");

            for (var i = 0; i < rows.length; i++) {
                var row = [];
                var cols = rows[i].querySelectorAll("td, th");

                // Extract only the first six columns
                for (var j = 0; j < 6; j++) {
                    var text = cols[j].innerText;
                    // Wrap text containing commas or new lines in double quotes
                    if (text.includes(',') || text.includes('\n')) {
                        text = `"${text.replace(/"/g, '""')}"`;
                    }
                    row.push(text);
                }

                csv.push(row.join(","));
            }

            // Download CSV file
            downloadCSV(csv.join("\n"), filename);
        }
    </script> --}}




    {{-- images  --}}
    <script>
        function downloadCSV(csv, filename) {
            var csvFile;
            var downloadLink;

            // Add BOM to the beginning of the CSV to ensure UTF-8 encoding
            var bom = "\uFEFF";

            // CSV file
            csvFile = new Blob([bom + csv], {
                type: "text/csv;charset=utf-8;"
            });

            // Download link
            downloadLink = document.createElement("a");

            // File name
            downloadLink.download = filename;

            // Create a link to the file
            downloadLink.href = window.URL.createObjectURL(csvFile);

            // Hide download link
            downloadLink.style.display = "none";

            // Add the link to DOM
            document.body.appendChild(downloadLink);

            // Click download link
            downloadLink.click();
        }

        function exportTableToCSV(filename) {
            var csv = [];
            var rows = document.querySelectorAll("#cannedResponsesTable tr");

            for (var i = 0; i < rows.length; i++) {
                var row = [];
                var cols = rows[i].querySelectorAll("td, th");

                // Extract only the first six columns
                for (var j = 0; j < 6; j++) {
                    var cellText = cols[j].innerText;

                    // Check if the column contains an image
                    var img = cols[j].querySelector("img");
                    if (img) {
                        var imgSrc = img.src;

                        // Optionally convert to base64 if needed
                        // var imgBase64 = getBase64Image(img);

                        // Include the text and image URL or base64 data
                        cellText += ` (Image: ${imgSrc})`; // or ` (Image: ${imgBase64})`
                    }

                    // Wrap text containing commas or new lines in double quotes
                    if (cellText.includes(',') || cellText.includes('\n')) {
                        cellText = `"${cellText.replace(/"/g, '""')}"`;
                    }
                    row.push(cellText);
                }

                csv.push(row.join(","));
            }

            // Download CSV file
            downloadCSV(csv.join("\n"), filename);
        }

        // Helper function to convert image to base64
        function getBase64Image(img) {
            var canvas = document.createElement("canvas");
            canvas.width = img.width;
            canvas.height = img.height;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0);
            var dataURL = canvas.toDataURL("image/png");
            return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
        }
    </script>

    <script>
        const editor = CKEDITOR.ClassicEditor.create(document.querySelector('#body'), {
                toolbar: {
                    items: [

                        {
                            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', '|',



                    ],
                    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 => {
                const toolbarContainer = document.querySelector('#toolbar-container');
                toolbarContainer.appendChild(editor.ui.view.toolbar.element);


                editor.model.document.on('change:data', () => {
                    // console.log(document.querySelector('#body').innerText);
                    Livewire.emit('openTextdata', editor.getData());
                });

                window.addEventListener('gitContent', (event) => {
                    var content = event.detail.content;
                    // Retrieve existing content from the editor
                    var existingContent = editor.getData();
                    // var updatedContent = existingContent + content;
                    var updatedContent = content;
                    editor.setData(updatedContent);

                    // document.querySelector('#body').value = content;
                });
            })
            .catch(error => {
                console.error(error);
            });
    </script>

    <script type="module">
        import 'https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js'
        import insertText from 'https://cdn.jsdelivr.net/npm/insert-text-at-cursor@0.3.0/index.js'

        window.addEventListener('showEmoji', event => {
            document.querySelector('emoji-picker').addEventListener('emoji-click', e => {
                insertText(document.querySelector('#adsssdE'), e.detail.unicode)
            })
        });
        document.addEventListener('click', function(event) {
            var emoji = document.getElementById('emoji');
            if (!emoji.contains(event.target)) {
                Livewire.emit('closeShowEmoji')
            }
        });
    </script>

    <script>
        function getId(element) {
            var position2 = element.id;
            const el = document.querySelector("#" + position2 + " #icon1");
            el.style.display = 'block';
            const el1 = document.querySelector("#" + position2 + " #icon2");
            el1.style.color = 'black';
            const el2 = document.querySelector("#" + position2 + " #icon3");
            el2.style.color = 'black';
            const el0 = document.querySelector("#" + position2);
            el0.classList.add("shadow");

        }

        function getId2(element) {
            var position2 = element.id;
            const el = document.querySelector("#" + position2 + " #icon1");
            el.style.display = 'none';
            const el1 = document.querySelector("#" + position2 + " #icon2");
            el1.style.color = 'white';
            const el2 = document.querySelector("#" + position2 + " #icon3");
            el2.style.color = 'white';
            const el0 = document.querySelector("#" + position2);
            el0.classList.remove("shadow");
        }

        function myFunction() {

            var x = document.getElementById("page").innerHTML;

            document.getElementById("content").innerHTML = x;

        }

        function getContent() {
            var content = document.getElementById('page').innerHTML;

            document.getElementById("content").innerHTML = content;
        }

        window.addEventListener('close-modal', event => {
            // document.getElementById('closeModalDeletess').click()
            document.getElementById('closeModal').click();
            document.getElementById('closeModal1').click();
            // document.getElementById('closeModal').click();

            // document.getElementById('closeModalDelete').click();
            // document.getElementById('closemodel').click();
        });

        window.addEventListener('close-modal-2', event => {
            // document.getElementById('closeModalDeletess').click()

            document.getElementById('closeModal2').click()
            // document.getElementById('closeModal').click();
            // document.getElementById('closeModal1').click();
            // document.getElementById('closeModalDelete').click();
            // document.getElementById('closemodel').click();
        });
    </script>

@endsection