@extends('tenant.layouts.agent')

@section('style')

@endsection

@section('content')
    <livewire:single-page.tenant.agent.content.index />
@endsection

@section('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.4.2/super-build/ckeditor.js"></script>
    <script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
    <script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
    <script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
    <link href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" type="text/css" rel="stylesheet">
    <link href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" type="text/css" rel="stylesheet">


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

        function toggleSearchAndFilter() {
            // var search_button = $('#search_button');
            var search = $('#search');
            var filter = $('#filter');

            // search_button.click(function() {
                search.fadeToggle(10);
                filter.hide();
            // });
        }
    </script>
    <script type="module">

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

        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'
        let dataLoaded = false;

        window.addEventListener('loadMoreDataResponse', event => {
            dataLoaded = false;
        });
        window.addEventListener('preloader2', event => {
            document.body.style.overflow = 'hidden';
            document.querySelector(".preloader2").style.display = "flex";
        });
        window.addEventListener('pageSwapped', event => {

            // Common script
            if (event.detail === 'socials' || event.detail === 'chats' )
            {
                let scrollContainer = document.getElementById('scroll-container');
                if (scrollContainer) {
                    scrollContainer.addEventListener('scroll', function() {
                        if (parseInt(this.scrollHeight - this.scrollTop) > parseInt(this.clientHeight) - 5 && parseInt(this.scrollHeight - this.scrollTop) < parseInt(this.clientHeight) + 5) {
                            if (!dataLoaded) {

                                dataLoaded = true;
                                Livewire.emit('loadMoreData');
                            }
                        }
                    });
                } else {
                    console.error('Element with ID "scroll-container" not found.');
                }

                window.addEventListener('close-modal-filter', event => {
                    document.getElementById('closeModalFilter').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: 10000000000,left: 100,behavior: "smooth"})
                });

                window.addEventListener('showEmoji', event => {
                    document.querySelector('emoji-picker').addEventListener('emoji-click', e => {
                        insertText(document.querySelector('#adsssdE'), e.detail.unicode)
                    })
                });

                window.addEventListener('showEmojiTo', event => {
                    document.querySelector('emoji-picker.reply').addEventListener('emoji-click', e => {
                        insertText(document.querySelector('#tetetet'), e.detail.unicode)
                    })
                });
                document.addEventListener('click', function(event) {
                    var cannedresponce = document.getElementById('cannedresponce');
                    if(cannedresponce)
                    {
                        if (!cannedresponce.contains(event.target)) {
                            Livewire.emit('closeShowCanned')
                        }
                    }

                });
                document.addEventListener('click', function(event) {
                    var emojy = document.querySelector('emoji-picker');
                    if(emojy)
                    {
                        if (!emojy.contains(event.target)) {
                            Livewire.emit('closeEmoji')
                        }
                    }

                });
            }
            if (event.detail === 'performance dashboard')
            {
                // Retrieve the checkbox element
                var myCheckbox = document.getElementById('checkbox2');

                // Set the checkbox as checked
                myCheckbox.checked = false;
                // myCheckbox.click();


                // Retrieve the checkbox element
                var myCheckbox1 = document.getElementById('checkbox');

                // Set the checkbox as checked
                myCheckbox.checked = false;
                // myCheckbox1.click();

                if(!myCheckbox.checked)
                {
                    myCheckbox.click();
                }
                if(!myCheckbox1.checked)
                {
                    myCheckbox1.click();
                }

                var myElement = $('#cor');
                var myElement_tim = $('#tim');
                var myElement_over = $('#over');
                var myElement_email = $('#email');
                var myElement_noti = $('#noti');
                var myButton = $('#down_img');
                var downmod = $('#down')
                var upmod = $('#up')
                var myButton_up = $('#up_img');
                var myButton_2 = $('#down_img_2');
                var myButton_up_2 = $('#up_img_2');
                var myButton_3 = $('#down_img_3');
                var myButton_up_3 = $('#up_img_3');
                var myButton_voice = $('#voice');
                var myButton_none_voice = $('#none-voice');
                var myButton_ticket = $('#ticket');
                var myButton_agent = $('#agent');
                var downmod_2 = $('#down_2');
                var show_hide_voice = $('#none_voice_show');
                var upmod_2 = $('#up_2');
                var downmod_3 = $('#down_3');
                var upmod_3 = $('#up_3');


                document.getElementById('voice').addEventListener('click', function() {
                    Livewire.emit('swapChanelArray', { swapChanel: 'ticket' });
                });

                document.getElementById('none-voice').addEventListener('click', function() {
                    Livewire.emit('swapChanelArray', { swapChanel: 'ticket' });
                });

                document.getElementById('ticket').addEventListener('click', function() {
                    Livewire.emit('swapChanelArray', { swapChanel: 'none-voice' });
                });

                document.getElementById('agent').addEventListener('click', function() {
                    Livewire.emit('swapChanelArray', { swapChanel: 'none-voice' });
                });



                myElement.mouseover(function() {
                    var myImage = $('#col_img');
                    myImage.attr('src', '/tenancy/assets/img/cor_hov.png');
                });

                myElement.mouseleave(function(event) {
                    var myImage = $('#col_img');
                    myImage.attr('src', '/tenancy/assets/img/cor_nor.png');

                });

                myElement_tim.mouseover(function() {
                    var myImage = $('#tim_img');
                    myImage.attr('src', '/tenancy/assets/img/tim_hov.png');
                });

                myElement_tim.mouseleave(function(event) {
                    var myImage = $('#tim_img');
                    myImage.attr('src', '/tenancy/assets/img/tim_nor.png');

                });

                myElement_over.mouseover(function() {
                    var myImage = $('#over_img');
                    myImage.attr('src', '/tenancy/assets/img/over_hov.png');
                });

                myElement_over.mouseleave(function(event) {
                    var myImage = $('#over_img');
                    myImage.attr('src', '/tenancy/assets/img/over_nor.png');

                });

                myElement_email.mouseover(function() {
                    var myImage = $('#email_img');
                    myImage.attr('src', '/tenancy/assets/img/email_hov.png');
                });

                myElement_email.mouseleave(function(event) {
                    if(event.target.classList.contains('db-top-selected-border')){ return false;}
                    var myImage = $('#email_img');
                    myImage.attr('src', '/tenancy/assets/img/email_nor.png');


                });

                myElement_noti.mouseover(function() {
                    var myImage = $('#noti_img');
                    myImage.attr('src', '/tenancy/assets/img/noti_hov.png');
                });

                myElement_noti.mouseleave(function(event) {

                    var myImage = $('#noti_img');
                    myImage.attr('src', '/tenancy/assets/img/noti_nor.png');

                });


                //mail
                var myElement_mailt = $('#mail');
                myElement_mailt.mouseover(function() {
                    var myImage = $('#mail_img');
                    myImage.attr('src', '/tenancy/assets/img/mail.png');
                });
                myElement_mailt.mouseleave(function(event) {
                    if(event.target.classList.contains('db-top-selected-border')){ return false;}
                    var myImage = $('#mail_img');
                    myImage.attr('src', '/tenancy/assets/img/mails.png');

                });


                //twitter
                var myElement_twet = $('#twitter');
                myElement_twet.mouseover(function() {
                    var myImage = $('#twitter_img');
                    myImage.attr('src', '/tenancy/assets/img/twitter_color.png');
                });
                myElement_twet.mouseleave(function(event) {

                    if(event.target.classList.contains('db-top-selected-border')){ return false;}
                    var myImage = $('#twitter_img');
                    myImage.attr('src', '/tenancy/assets/img/twitter1.png');

                });


                //instagram
                var myElement_instagram = $('#instagram');
                myElement_instagram.mouseleave(function(event) {
                    if(event.target.classList.contains('db-top-selected-border')){ return false;}
                    var myImage = $('#instagram_img');
                    myImage.attr('src', '/tenancy/assets/img/instagram1.png');

                });
                myElement_instagram.mouseover(function() {

                    var myImage = $('#instagram_img');
                    myImage.attr('src', '/tenancy/assets/img/instagram_color.png');

                });


                //facebook
                var facebook_img = $('#facebook');
                facebook_img.mouseleave(function(event) {
                    if(event.target.classList.contains('db-top-selected-border')){ return false;}
                    var myImage = $('#facebook_img');
                    myImage.attr('src', '/tenancy/assets/img/facebook1.png');

                });
                facebook_img.mouseover(function() {
                    var myImage = $('#facebook_img');
                    myImage.attr('src', '/tenancy/assets/img/vector-352@2x.png');
                });


                //whatsapp
                var whatsapp_img = $('#whatsapp');
                whatsapp_img.mouseleave(function(event) {
                    if(event.target.classList.contains('db-top-selected-border')){ return false;}
                    var myImage = $('#whatsapp_img');
                    myImage.attr('src', '/tenancy/assets/img/whatsapp1.png');

                });
                whatsapp_img.mouseover(function() {
                    var myImage = $('#whatsapp_img');
                    myImage.attr('src', '/tenancy/assets/img/whats.png');
                });



                //webchat
                var webchat_img = $('#webchat');
                webchat_img.mouseleave(function(event) {
                    if(event.target.classList.contains('db-top-selected-border')){ return false;}
                    var myImage = $('#webchat_img');
                    myImage.attr('src', '/tenancy/assets/img/web_chat.png');

                });
                webchat_img.mouseover(function() {
                    var myImage = $('#webchat_img');
                    myImage.attr('src', '/tenancy/assets/img/web_chat_color.png');
                });


                //wechat
                var wechat_img = $('#wechat');
                wechat_img.mouseleave(function(event) {
                    if(event.target.classList.contains('db-top-selected-border')){ return false;}
                    var myImage = $('#wechat_img');
                    myImage.attr('src', '/tenancy/assets/img/wechat--1--1@2x.png');

                });
                wechat_img.mouseover(function() {
                    var myImage = $('#wechat_img');
                    myImage.attr('src', '/tenancy/assets/img/wechat-1@2x.png');
                });



                //telegram
                var telegram_img = $('#telegram');
                telegram_img.mouseleave(function(event) {
                    if(event.target.classList.contains('db-top-selected-border')){ return false;}
                    var myImage = $('#telegram_img');
                    myImage.attr('src', '/tenancy/assets/img/telegram.png');

                });
                telegram_img.mouseover(function() {
                    var myImage = $('#telegram_img');
                    myImage.attr('src', '/tenancy/assets/img/telegram_color.png');
                });


                //linkedin
                var linkedin_img = $('#linkedin');
                linkedin_img.mouseleave(function(event) {
                    if(event.target.classList.contains('db-top-selected-border')){ return false;}
                    var myImage = $('#linkedin_img');
                    myImage.attr('src', '/tenancy/assets/img/linkedin.png');

                });
                linkedin_img.mouseover(function() {
                    var myImage = $('#linkedin_img');
                    myImage.attr('src', '/tenancy/assets/img/linkedin_color.png');
                });


                //youtube
                var youtube_img = $('#youtube');
                youtube_img.mouseleave(function(event) {
                    if(event.target.classList.contains('db-top-selected-border')){ return false;}
                    var myImage = $('#youtube_img');
                    myImage.attr('src', '/tenancy/assets/img/youtube.png');

                });
                youtube_img.mouseover(function() {
                    var myImage = $('#youtube_img');
                    myImage.attr('src', '/tenancy/assets/img/youtube_color.png');
                });

                //google
                var google_img = $('#google');
                google_img.mouseleave(function(event) {
                    if(event.target.classList.contains('db-top-selected-border')){ return false;}
                    var myImage = $('#google_img');
                    myImage.attr('src', '/tenancy/assets/img/google-2.png');

                });
                google_img.mouseover(function() {
                    var myImage = $('#google_img');
                    myImage.attr('src', '/tenancy/assets/img/Google-Review.png');
                });


                myButton.click(function() {
                    downmod.hide();
                    upmod.show();
                });
                myButton_up.click(function() {
                    downmod.show();
                    upmod.hide();
                });

                myButton_2.click(function() {
                    downmod_2.hide();
                    upmod_2.show();
                });
                myButton_up_2.click(function() {
                    downmod_2.show();
                    upmod_2.hide();
                });

                myButton_3.click(function() {
                    downmod_3.hide();
                    upmod_3.show();
                });
                myButton_up_3.click(function() {
                    downmod_3.show();
                    upmod_3.hide();
                });


                myButton_none_voice.click(function() {
                    show_hide_voice.fadeToggle(1000);
                    myButton_ticket.show(1000);
                    myButton_none_voice.hide(1000);
                    myButton_agent.hide(1000);
                    myButton_voice.hide(1000);

                });

                myButton_voice.click(function() {
                    show_hide_voice.fadeToggle(1000);
                    myButton_ticket.show();
                    myButton_voice.hide(1000);
                    myButton_none_voice.hide(1000);
                    myButton_agent.hide(1000);

                });

                myButton_ticket.click(function() {
                    show_hide_voice.fadeToggle(1000);
                    myButton_none_voice.show();
                    myButton_voice.hide(1000);

                    myButton_ticket.hide(1000);
                    myButton_agent.hide(1000);

                });

                myButton_agent.click(function() {
                    myButton_none_voice.show();
                    myButton_voice.hide(1000);
                    myButton_agent.hide(1000);
                    myButton_ticket.hide(1000);


                });

                const colors = {
                    green: {
                        default: "rgba(0,163,78,,1)",
                        half: "rgba(0,163,78,0.44021358543417366)",
                        quarter: "rgba(0,163,78,0.16010154061624648)",
                        zero: "rgba(0,163,78,0)"
                    }
                };

                const OCctx = document.getElementById('chartContainer').getContext("2d");


                const greenGradient = OCctx.createLinearGradient(0, 25, 0, 300);

                greenGradient.addColorStop(0, colors.green.half);
                greenGradient.addColorStop(0.35, colors.green.quarter);
                greenGradient.addColorStop(1, colors.green.zero);


                const OCdata = {
                    labels: [
                        '0',
                        '1',
                        '2',
                        '3',
                        '4',
                        '5',
                        '6',
                        '7',
                        '8',
                        '9',
                        '10',
                        '11',
                        '12',
                        '13',
                        '14',
                        '15',
                        '16',
                        '17',
                        '18',
                        '19',
                        '20',
                        '21',
                        '22',
                        '23',
                    ],
                    datasets: [{
                        backgroundColor: greenGradient,
                        label: 'Today',
                        data: [

                        ],
                        borderColor: '#01a34e',
                        //  backgroundColor: '#d3d3d3',
                        hidden: true,
                        fill: true,
                        tension: 0.4
                    },


                        {
                            label: 'Yesterday',
                            data: [

                            ],
                            borderColor: '#dadada',
                            hidden: true,
                            backgroundColor: 'transparent',
                            fill: true,
                            tension: 0.4
                        }
                    ]
                };


                const OCconfig = {
                    type: 'line',
                    data: OCdata,
                    options: {
                        responsive: true,
                        scales: {
                            x: {
                                stacked: false,
                                grid: {
                                    display: false
                                },
                                gridLines: {
                                    drawBorder: false,
                                },
                                ticks: {
                                    color: '#858585',

                                }

                            },
                            y: {
                                stacked: false,
                                gridLines: {
                                    drawBorder: false,
                                },
                                border: {
                                    display: false
                                },
                                ticks: {
                                    color: '#858585',

                                }
                            }
                        },
                        plugins: {
                            filler: {
                                propagate: false,
                            },
                            title: {
                                display: false,
                                text: 'Hello'
                            },

                            legend: {
                                fullSize: true,
                                display: false,
                                position: 'top',
                                align: 'end',
                                padding: 10,
                                color: '#282828',
                                background: '#282828',
                                labels: {
                                    color: '#282828',
                                    font: {
                                        weight: 'normal',
                                        padding: 20,
                                        family:'Poppins'
                                    },

                                    boxWidth: 15,
                                    boxHeight: 15,

                                    maxHeight: 50,
                                },
                                title: {

                                }
                            },
                        },
                        interaction: {
                            intersect: false,
                        }
                    },
                };

                let chartInstance = new Chart(OCctx, OCconfig);


                function updateGraphData(todayData, yesterdayData) {
                    OCdata.datasets[0].data = todayData;
                    OCdata.datasets[1].data = yesterdayData;

                    // console.log( todayData)
                    chartInstance.update();
                    // Call your graph rendering function here to re-render the graph
                    // Replace with your graph rendering logic
                    // renderGraph();
                }

                window.addEventListener('graph', (event) => {
                    const { today, yesterday } = event.detail;
                    updateGraphData(today, yesterday);
                });



                $("#checkbox").click(function() {
                    chartInstance.data.datasets.forEach(function(ds) {
                        if(ds.label == "Today"){
                            ds.hidden = !ds.hidden;
                        }
                    });
                    chartInstance.update();
                });

                $("#checkbox2").click(function() {
                    // console.log('Clicked');
                    chartInstance.data.datasets.forEach(function(ds) {
                        if(ds.label == "Yesterday"){
                            ds.hidden = !ds.hidden;
                        }
                    });
                    chartInstance.update();
                });

                chartInstance.data.datasets.forEach(function(ds) {

                        ds.hidden = !ds.hidden;

                });
                chartInstance.update();

                const ctx = document.getElementById('chartjscontainer');
                const data = {
                    labels: [
                        'Average resolution time             ',
                        'Resolution within SLA                              ',
                        'Reopened tickets'
                    ],
                    datasets: [{
                        data: [{{ $art  }}, {{ $rws }}, {{ $asds  }}],
                        backgroundColor: [
                            '#01a34e',
                            '#bbcf34',
                            '#63676a',

                        ],
                        borderWidth: 1,
                        hoverOffset: 10
                    }],
                };
                const options = {
                    cutout: 80,
                    responsive: true,
                    aspectRatio: 1,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            fullSize: true,
                            display: true,
                            position: 'bottom',
                            align: 'start',
                            labels: {
                                color: 'gray',
                                font: {
                                    weight: 'normal',
                                    size: 11,
                                    family: 'Poppins'
                                },
                                boxWidth: 15,
                                boxHeight: 15,

                            }
                        }
                    },

                };
                const config = {
                    type: 'doughnut',
                    data: data,
                    options,
                    options,
                    radius: 1
                };


                new Chart(ctx, config, options);

                textCenter('ART {{$averageHour}}h, 00m', 'chartjscontainer');

                function textCenter(val, containerName) {
                    Chart.register({
                        id: 'myGraphText',
                        beforeDraw: function(chart) {
                            if (chart.canvas.id != containerName) {
                                return 0;
                            }
                            var width = chart.width,
                                height = chart.height,
                                ctx = chart.ctx;

                            ctx.restore();
                            var fontSize = (height / 342).toFixed(2);
                            ctx.font = fontSize + "em sans-serif";
                            ctx.textBaseline = "middle";

                            var text = val,
                                textX = Math.round((width - ctx.measureText(text).width) / 2),
                                textY = height / 2;

                            ctx.fillText(text, textX, textY);
                            ctx.save();
                        }
                    });
                }

            }
            else if(event.detail === 'ticket management')
            {}
            else if(event.detail === 'createTicket')
            {}
            else if(event.detail === 'ticketList')
            {
                const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
                const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
                document.addEventListener('livewire:load', function () {
                    Livewire.on('reload-page', function () {
                        location.reload();
                    });
                });

                var myButton = $('#email');
                var myButtonbd = $('.body');
                var filter_button = $('#filter_button');
                var filter_x = $('#x');
                var search_button = $('#search_button');
                var filter = $('#filter');
                var search = $('#search');
                var downmod = $('#tl')

                $(document).ready(function() {
                    myButton.click(function() {
                        downmod.fadeToggle(10);
                    });
                    myButtonbd.click(function() {
                        downmod.hide();
                    });
                });
                $(document).ready(function() {
                    filter_button.click(function() {
                        filter.fadeToggle(10);
                        search.hide();

                    });
                });
                $(document).ready(function() {
                    search_button.click(function() {
                        search.fadeToggle(10);
                        filter.hide();

                    });
                });
                $(document).ready(function() {
                    filter_x.click(function() {
                        filter.fadeToggle(10);
                    });


                });
                $(document).ready(function() {
                    var myButton_up = $('#up_img');
                    var myButton_2 = $('#down_img');
                    var downmod = $('#down')
                    var upmod = $('#up')

                    myButton_up.click(function() {
                        upmod.fadeToggle(10);
                        downmod.show();
                    });
                    myButton_2.click(function() {
                        downmod.fadeToggle(10);
                        upmod.show();
                    });
                });
                $('.filter-input').click((event) => {
                    $('.filter-option-label').css({"border-color": "#d5d5d5"});
                    console.log($(event.target).parent().css({ "border-color": "#39b373"}));
                })

                window.addEventListener('close-modal-filter', event => {
                    document.getElementById('closeModalFilter').click();
                });
            }
            else if(event.detail === 'notifications')
            {
                var filter_x = $('#x');
                var filter_button = $('#filter_button');
                var filter = $('#filter');

                $(document).ready(function() {
                    filter_x.click(function() {
                        filter.fadeToggle(10);
                    });


                });

                $(document).ready(function() {
                    filter_button.click(function() {
                        filter.fadeToggle(10);

                    });
                });
                var filter_x = $('#x');
                var filter_button = $('#filter_button');
                var filter = $('#filter');

                $(document).ready(function() {
                    filter_x.click(function() {
                        filter.fadeToggle(10);
                    });


                });

                $(document).ready(function() {
                    filter_button.click(function() {
                        filter.fadeToggle(10);

                    });
                });
            }
            else if(event.detail === 'emails')
            {
                let scrollContainer = document.getElementById('scroll-container');
                if (scrollContainer) {

                    scrollContainer.addEventListener('scroll', function() {

                        if (parseInt(this.scrollHeight - this.scrollTop) > parseInt(this.clientHeight) - 5 && parseInt(this.scrollHeight - this.scrollTop) < parseInt(this.clientHeight) + 5) {
                            if (!dataLoaded) {

                                dataLoaded = true;
                                Livewire.emit('loadMoreData');
                            }
                        }
                    });
                } else {
                    console.error('Element with ID "scroll-container" not found.');
                }
                document.addEventListener('click', function(event) {
                    var cannedresponce = document.getElementById('cannedresponce');
                    if(cannedresponce)
                    {
                        if (!cannedresponce.contains(event.target)) {
                            Livewire.emit('closeShowCanned')
                        }
                    }
                });


                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) --}}
                            });
                        }
                    });

                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()

                });
            }
            setTimeout(function() {
                // Hide the preloader
                document.querySelector(".preloader2").style.display = "none";
                document.body.style.overflow = ''; // Set it back to the default value

                // Optionally, show the content
                // document.querySelector(".content").style.display = "block";
            }, 1500);
        });

    </script>



    <script type="module">

        $(document).ready(function() {

            // Retrieve the checkbox element
            var myCheckbox = document.getElementById('checkbox2');

            // Set the checkbox as checked
            myCheckbox.checked = false;
            // myCheckbox.click();


            // Retrieve the checkbox element
            var myCheckbox1 = document.getElementById('checkbox');

            // Set the checkbox as checked
            myCheckbox.checked = false;
            // myCheckbox1.click();

            if(!myCheckbox.checked)
            {
                myCheckbox.click();
            }
            if(!myCheckbox1.checked)
            {
                myCheckbox1.click();
            }

            var myElement = $('#cor');
            var myElement_tim = $('#tim');
            var myElement_over = $('#over');
            var myElement_email = $('#email');
            var myElement_noti = $('#noti');
            var myButton = $('#down_img');
            var downmod = $('#down')
            var upmod = $('#up')
            var myButton_up = $('#up_img');
            var myButton_2 = $('#down_img_2');
            var myButton_up_2 = $('#up_img_2');
            var myButton_3 = $('#down_img_3');
            var myButton_up_3 = $('#up_img_3');
            var myButton_voice = $('#voice');
            var myButton_none_voice = $('#none-voice');
            var myButton_ticket = $('#ticket');
            var myButton_agent = $('#agent');
            var downmod_2 = $('#down_2');
            var show_hide_voice = $('#none_voice_show');
            var upmod_2 = $('#up_2');
            var downmod_3 = $('#down_3');
            var upmod_3 = $('#up_3');


            document.getElementById('voice').addEventListener('click', function() {
                Livewire.emit('swapChanelArray', { swapChanel: 'ticket' });
            });

            document.getElementById('none-voice').addEventListener('click', function() {
                Livewire.emit('swapChanelArray', { swapChanel: 'ticket' });
            });

            document.getElementById('ticket').addEventListener('click', function() {
                Livewire.emit('swapChanelArray', { swapChanel: 'none-voice' });
            });

            document.getElementById('agent').addEventListener('click', function() {
                Livewire.emit('swapChanelArray', { swapChanel: 'none-voice' });
            });



            myElement.mouseover(function() {
                var myImage = $('#col_img');
                myImage.attr('src', '/tenancy/assets/img/cor_hov.png');
            });

            myElement.mouseleave(function(event) {
                var myImage = $('#col_img');
                myImage.attr('src', '/tenancy/assets/img/cor_nor.png');

            });

            myElement_tim.mouseover(function() {
                var myImage = $('#tim_img');
                myImage.attr('src', '/tenancy/assets/img/tim_hov.png');
            });

            myElement_tim.mouseleave(function(event) {
                var myImage = $('#tim_img');
                myImage.attr('src', '/tenancy/assets/img/tim_nor.png');

            });

            myElement_over.mouseover(function() {
                var myImage = $('#over_img');
                myImage.attr('src', '/tenancy/assets/img/over_hov.png');
            });

            myElement_over.mouseleave(function(event) {
                var myImage = $('#over_img');
                myImage.attr('src', '/tenancy/assets/img/over_nor.png');

            });

            myElement_email.mouseover(function() {
                var myImage = $('#email_img');
                myImage.attr('src', '/tenancy/assets/img/email_hov.png');
            });

            myElement_email.mouseleave(function(event) {
                if(event.target.classList.contains('db-top-selected-border')){ return false;}
                var myImage = $('#email_img');
                myImage.attr('src', '/tenancy/assets/img/email_nor.png');


            });

            myElement_noti.mouseover(function() {
                var myImage = $('#noti_img');
                myImage.attr('src', '/tenancy/assets/img/noti_hov.png');
            });

            myElement_noti.mouseleave(function(event) {

                var myImage = $('#noti_img');
                myImage.attr('src', '/tenancy/assets/img/noti_nor.png');

            });


            //mail
            var myElement_mailt = $('#mail');
            myElement_mailt.mouseover(function() {
                var myImage = $('#mail_img');
                myImage.attr('src', '/tenancy/assets/img/mail.png');
            });
            myElement_mailt.mouseleave(function(event) {
                if(event.target.classList.contains('db-top-selected-border')){ return false;}
                var myImage = $('#mail_img');
                myImage.attr('src', '/tenancy/assets/img/mails.png');

            });


            //twitter
            var myElement_twet = $('#twitter');
            myElement_twet.mouseover(function() {
                var myImage = $('#twitter_img');
                myImage.attr('src', '/tenancy/assets/img/twitter_color.png');
            });
            myElement_twet.mouseleave(function(event) {

                if(event.target.classList.contains('db-top-selected-border')){ return false;}
                var myImage = $('#twitter_img');
                myImage.attr('src', '/tenancy/assets/img/twitter1.png');

            });


            //instagram
            var myElement_instagram = $('#instagram');
            myElement_instagram.mouseleave(function(event) {
                if(event.target.classList.contains('db-top-selected-border')){ return false;}
                var myImage = $('#instagram_img');
                myImage.attr('src', '/tenancy/assets/img/instagram1.png');

            });
            myElement_instagram.mouseover(function() {

                var myImage = $('#instagram_img');
                myImage.attr('src', '/tenancy/assets/img/instagram_color.png');

            });


            //facebook
            var facebook_img = $('#facebook');
            facebook_img.mouseleave(function(event) {
                if(event.target.classList.contains('db-top-selected-border')){ return false;}
                var myImage = $('#facebook_img');
                myImage.attr('src', '/tenancy/assets/img/facebook1.png');

            });
            facebook_img.mouseover(function() {
                var myImage = $('#facebook_img');
                myImage.attr('src', '/tenancy/assets/img/vector-352@2x.png');
            });


            //whatsapp
            var whatsapp_img = $('#whatsapp');
            whatsapp_img.mouseleave(function(event) {
                if(event.target.classList.contains('db-top-selected-border')){ return false;}
                var myImage = $('#whatsapp_img');
                myImage.attr('src', '/tenancy/assets/img/whatsapp1.png');

            });
            whatsapp_img.mouseover(function() {
                var myImage = $('#whatsapp_img');
                myImage.attr('src', '/tenancy/assets/img/whats.png');
            });



            //webchat
            var webchat_img = $('#webchat');
            webchat_img.mouseleave(function(event) {
                if(event.target.classList.contains('db-top-selected-border')){ return false;}
                var myImage = $('#webchat_img');
                myImage.attr('src', '/tenancy/assets/img/web_chat.png');

            });
            webchat_img.mouseover(function() {
                var myImage = $('#webchat_img');
                myImage.attr('src', '/tenancy/assets/img/web_chat_color.png');
            });


            //wechat
            var wechat_img = $('#wechat');
            wechat_img.mouseleave(function(event) {
                if(event.target.classList.contains('db-top-selected-border')){ return false;}
                var myImage = $('#wechat_img');
                myImage.attr('src', '/tenancy/assets/img/wechat--1--1@2x.png');

            });
            wechat_img.mouseover(function() {
                var myImage = $('#wechat_img');
                myImage.attr('src', '/tenancy/assets/img/wechat-1@2x.png');
            });



            //telegram
            var telegram_img = $('#telegram');
            telegram_img.mouseleave(function(event) {
                if(event.target.classList.contains('db-top-selected-border')){ return false;}
                var myImage = $('#telegram_img');
                myImage.attr('src', '/tenancy/assets/img/telegram.png');

            });
            telegram_img.mouseover(function() {
                var myImage = $('#telegram_img');
                myImage.attr('src', '/tenancy/assets/img/telegram_color.png');
            });


            //linkedin
            var linkedin_img = $('#linkedin');
            linkedin_img.mouseleave(function(event) {
                if(event.target.classList.contains('db-top-selected-border')){ return false;}
                var myImage = $('#linkedin_img');
                myImage.attr('src', '/tenancy/assets/img/linkedin.png');

            });
            linkedin_img.mouseover(function() {
                var myImage = $('#linkedin_img');
                myImage.attr('src', '/tenancy/assets/img/linkedin_color.png');
            });


            //youtube
            var youtube_img = $('#youtube');
            youtube_img.mouseleave(function(event) {
                if(event.target.classList.contains('db-top-selected-border')){ return false;}
                var myImage = $('#youtube_img');
                myImage.attr('src', '/tenancy/assets/img/youtube.png');

            });
            youtube_img.mouseover(function() {
                var myImage = $('#youtube_img');
                myImage.attr('src', '/tenancy/assets/img/youtube_color.png');
            });

            //google
            var google_img = $('#google');
            google_img.mouseleave(function(event) {
                if(event.target.classList.contains('db-top-selected-border')){ return false;}
                var myImage = $('#google_img');
                myImage.attr('src', '/tenancy/assets/img/google-2.png');

            });
            google_img.mouseover(function() {
                var myImage = $('#google_img');
                myImage.attr('src', '/tenancy/assets/img/Google-Review.png');
            });


            myButton.click(function() {
                downmod.hide();
                upmod.show();
            });
            myButton_up.click(function() {
                downmod.show();
                upmod.hide();
            });

            myButton_2.click(function() {
                downmod_2.hide();
                upmod_2.show();
            });
            myButton_up_2.click(function() {
                downmod_2.show();
                upmod_2.hide();
            });

            myButton_3.click(function() {
                downmod_3.hide();
                upmod_3.show();
            });
            myButton_up_3.click(function() {
                downmod_3.show();
                upmod_3.hide();
            });


            myButton_none_voice.click(function() {
                show_hide_voice.fadeToggle(1000);
                myButton_ticket.show(1000);
                myButton_none_voice.hide(1000);
                myButton_agent.hide(1000);
                myButton_voice.hide(1000);

            });

            myButton_voice.click(function() {
                show_hide_voice.fadeToggle(1000);
                myButton_ticket.show();
                myButton_voice.hide(1000);
                myButton_none_voice.hide(1000);
                myButton_agent.hide(1000);

            });

            myButton_ticket.click(function() {
                show_hide_voice.fadeToggle(1000);
                myButton_none_voice.show();
                myButton_voice.hide(1000);

                myButton_ticket.hide(1000);
                myButton_agent.hide(1000);

            });

            myButton_agent.click(function() {
                myButton_none_voice.show();
                myButton_voice.hide(1000);
                myButton_agent.hide(1000);
                myButton_ticket.hide(1000);


            });

        });



        const colors = {
            green: {
                default: "rgba(0,163,78,,1)",
                half: "rgba(0,163,78,0.44021358543417366)",
                quarter: "rgba(0,163,78,0.16010154061624648)",
                zero: "rgba(0,163,78,0)"
            }
        };

        const OCctx = document.getElementById('chartContainer').getContext("2d");


        const greenGradient = OCctx.createLinearGradient(0, 25, 0, 300);

        greenGradient.addColorStop(0, colors.green.half);
        greenGradient.addColorStop(0.35, colors.green.quarter);
        greenGradient.addColorStop(1, colors.green.zero);


        const OCdata = {
            labels: [
                '0',
                '1',
                '2',
                '3',
                '4',
                '5',
                '6',
                '7',
                '8',
                '9',
                '10',
                '11',
                '12',
                '13',
                '14',
                '15',
                '16',
                '17',
                '18',
                '19',
                '20',
                '21',
                '22',
                '23',
            ],
            datasets: [{
                backgroundColor: greenGradient,
                label: 'Today',
                data: [

                ],
                borderColor: '#01a34e',
                //  backgroundColor: '#d3d3d3',
                hidden: true,
                fill: true,
                tension: 0.4
            },


                {
                    label: 'Yesterday',
                    data: [

                    ],
                    borderColor: '#dadada',
                    hidden: true,
                    backgroundColor: 'transparent',
                    fill: true,
                    tension: 0.4
                }
            ]
        };


        const OCconfig = {
            type: 'line',
            data: OCdata,
            options: {
                responsive: true,
                scales: {
                    x: {
                        stacked: false,
                        grid: {
                            display: false
                        },
                        gridLines: {
                            drawBorder: false,
                        },
                        ticks: {
                            color: '#858585',

                        }

                    },
                    y: {
                        stacked: false,
                        gridLines: {
                            drawBorder: false,
                        },
                        border: {
                            display: false
                        },
                        ticks: {
                            color: '#858585',

                        }
                    }
                },
                plugins: {
                    filler: {
                        propagate: false,
                    },
                    title: {
                        display: false,
                        text: 'Hello'
                    },

                    legend: {
                        fullSize: true,
                        display: false,
                        position: 'top',
                        align: 'end',
                        padding: 10,
                        color: '#282828',
                        background: '#282828',
                        labels: {
                            color: '#282828',
                            font: {
                                weight: 'normal',
                                padding: 20,
                                family:'Poppins'
                            },

                            boxWidth: 15,
                            boxHeight: 15,

                            maxHeight: 50,
                        },
                        title: {

                        }
                    },
                },
                interaction: {
                    intersect: false,
                }
            },
        };

        let chartInstance = new Chart(OCctx, OCconfig);


        function updateGraphData(todayData, yesterdayData) {
            OCdata.datasets[0].data = todayData;
            OCdata.datasets[1].data = yesterdayData;

            // console.log( todayData)
            chartInstance.update();
            // Call your graph rendering function here to re-render the graph
            // Replace with your graph rendering logic
            // renderGraph();
        }

        window.addEventListener('graph', (event) => {
            const { today, yesterday } = event.detail;
            updateGraphData(today, yesterday);
        });



        $("#checkbox").click(function() {
            chartInstance.data.datasets.forEach(function(ds) {
                if(ds.label == "Today"){
                    ds.hidden = !ds.hidden;
                }
            });
            chartInstance.update();
        });

        $("#checkbox2").click(function() {
            // console.log('Clicked');
            chartInstance.data.datasets.forEach(function(ds) {
                if(ds.label == "Yesterday"){
                    ds.hidden = !ds.hidden;
                }
            });
            chartInstance.update();
        });

    </script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        const ctx = document.getElementById('chartjscontainer');
        const data = {
            labels: [
                'Average resolution time             ',
                'Resolution within SLA                              ',
                'Reopened tickets'
            ],
            datasets: [{
                data: [{{ $art  }}, {{ $rws }}, {{ $asds  }}],
                backgroundColor: [
                    '#01a34e',
                    '#bbcf34',
                    '#63676a',

                ],
                borderWidth: 1,
                hoverOffset: 10
            }],
        };
        const options = {
            cutout: 80,
            responsive: true,
            aspectRatio: 1,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    fullSize: true,
                    display: true,
                    position: 'bottom',
                    align: 'start',
                    labels: {
                        color: 'gray',
                        font: {
                            weight: 'normal',
                            size: 11,
                            family: 'Poppins'
                        },
                        boxWidth: 15,
                        boxHeight: 15,

                    }
                }
            },

        };
        const config = {
            type: 'doughnut',
            data: data,
            options,
            options,
            radius: 1
        };


        new Chart(ctx, config, options);

        textCenter('ART {{$averageHour}}h, 00m', 'chartjscontainer');

        function textCenter(val, containerName) {
            Chart.register({
                id: 'myGraphText',
                beforeDraw: function(chart) {
                    if (chart.canvas.id != containerName) {
                        return 0;
                    }
                    var width = chart.width,
                        height = chart.height,
                        ctx = chart.ctx;

                    ctx.restore();
                    var fontSize = (height / 342).toFixed(2);
                    ctx.font = fontSize + "em sans-serif";
                    ctx.textBaseline = "middle";

                    var text = val,
                        textX = Math.round((width - ctx.measureText(text).width) / 2),
                        textY = height / 2;

                    ctx.fillText(text, textX, textY);
                    ctx.save();
                }
            });
        }


    </script>

    <script>
        document.addEventListener('reset_attachment', function () {
            document.getElementById('attachment').value = '';
        });
    </script>

@endsection