@extends('tenant.layouts.client')

@section('title', 'Dashboard ')

@section('filter')

{{--    <img id='none-voice' src="{{ asset('img/none-voice.png') }}" alt="mdo" width="30" height="30">--}}
{{--    <img id='voice' style="display:none;"  src="{{ asset('img/voice1.png') }}" alt="mdo" width="30" height="30">--}}
{{--    <img id='ticket' style="display:none;"  src="{{ asset('img/ticket_active.png') }}" alt="mdo" width="20" height="20">--}}
{{--    <img id='agent' style="display:none;"  src="{{ asset('img/user_2.png') }}" alt="mdo" width="22" height="22">--}}

@endsection

@section('style')
    <style>
        .but{
            padding-left: 50px;
            padding-right: 50px;
            border-radius: 5px;
            border-color: #e0f4ea;
            background-color: #e0f4ea;
            border: 2px;
            padding-top: 5px;
            padding-bottom: 5px;
            cursor: auto;
        }
        .form-check-input:checked {
            background-color:  #00a34e;
            border-color: #00a34e;
        }
        /*.box:hover > #icon1  {*/
        /*    color: green;*/
        /*}*/
        /*document.querySelector("#box")*/
        /*document.querySelector("#box > div:nth-child(2) > div:nth-child(1) > button > i")*/
    </style>
    <style>
        /*.cor:hover {*/
        /*    box-shadow: 0 0rem 1rem #0000000d !important;*/
        /*}*/

        /*.tim:hover {*/
        /*    box-shadow: 0 0rem 1rem #0000000d !important;*/
        /*}*/

        /*.over:hover {*/
        /*    box-shadow: 0 0rem 1rem #0000000d !important;*/
        /*}*/

        /*.email:hover {*/
        /*    box-shadow: 0 0rem 1rem #0000000d !important;*/
        /*}*/

        /*.noti:hover {*/
        /*    box-shadow: 0 0rem 1rem #0000000d !important;*/
        /*}*/


        .social:hover {
            box-shadow: 0 0rem 0.5rem #0000000d !important;
            border-radius: 146px !important;
            max-width: 61px;
            border: solid 2px;
            border-color: #f3f3f3;
            background: white;
        }

        .social {

            box-shadow: 0 0rem 0.5rem #0000000d !important;
            border-radius: 146px !important;
            max-width: 61px;
            border: solid 2px;
            border-color: #fff8f8;
            background: white;
            height: 50px;
            width: 50px;

        }

        .w-20 {
            width: 20%;
        }

        .float-left {
            float: left;
        }

        .mr-5 {
            margin: 10px;
        }

        .mrt-5 {
            margin-top: 12px;
        }

        .mr-l-r {
            margin-left: 10px;
            margin-right: 10px;
        }

        .mrt-3 {
            margin-top: 3px;
        }

        #chartContainer {
            stroke: red;
        }

        .cus_shdow {
            box-shadow: 0 0.2rem 1rem #0000002d !important
        }

        .container {
            margin-top: 50px;
            margin-left: 20px;
            margin-right: 20px;
        }

        .checkbox {
            width: 100%;

            position: relative;
            display: block;
        }

        .checkbox input[type="checkbox"] {
            width: auto;
            opacity: 0.00000001;
            position: absolute;
            left: 0;
            margin-left: -20px;
        }

        .checkbox label {
            position: relative;
        }

        .checkbox label:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            margin: 4px;
            width: 22px;
            height: 22px;
            transition: transform 0.28s ease;
            border-radius: 3px;
            border: 2px solid #e5e5e5;
            border-left: none;
            background: #ecfff5;
            border-radius: 5px;
        }

        .checkbox label:after {
            content: '';
            display: block;
            width: 10px;
            height: 5px;
            border-bottom: 2px solid #00a34e;
            border-left: 2px solid #00a34e;
            -webkit-transform: rotate(-45deg) scale(0);
            transform: rotate(-45deg) scale(0);
            background-color: #ecfff5 transition: transform ease 0.25s;
            will-change: transform;
            position: absolute;
            top: 12px;
            left: 10px;
        }

        .checkbox input[type="checkbox"]:checked~label::before {
            color: #7bbe72;
        }

        .checkbox input[type="checkbox"]:checked~label::after {
            -webkit-transform: rotate(-45deg) scale(1);
            transform: rotate(-45deg) scale(1);
        }

        .checkbox label {
            min-height: 34px;
            display: block;
            padding-left: 40px;
            margin-bottom: 0;
            font-weight: normal;
            cursor: pointer;
            vertical-align: sub;
        }

        .checkbox label span {
            position: absolute;
            top: 50%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
        }

        .checkbox input[type="checkbox"]:focus+label::before {
            outline: 0;
        }


        .checkbox2 {
            width: 100%;
            position: relative;
            display: block;
        }

        .checkbox2 input[type="checkbox"] {
            width: auto;
            opacity: 0.00000001;
            position: absolute;
            left: 0;
            margin-left: -20px;
        }

        .checkbox2 label {
            position: relative;
        }

        .checkbox2 label:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            margin: 4px;
            width: 22px;
            height: 22px;
            transition: transform 0.28s ease;
            border-radius: 3px;
            border: 2px solid #e5e5e5;
            border-right: none;
            background: #f8f8f8;
            border-radius: 5px;
        }

        .checkbox2 label:after {
            content: '';
            display: block;
            width: 10px;
            height: 5px;
            border-bottom: 2px solid #dadada;
            border-left: 2px solid #dadada;
            -webkit-transform: rotate(-45deg) scale(0);
            transform: rotate(-45deg) scale(0);
            background-color: #ecfff5 transition: transform ease 0.25s;
            will-change: transform;
            position: absolute;
            top: 12px;
            left: 10px;
        }

        .checkbox2 input[type="checkbox"]:checked~label::before {
            color: #7bbe72;
        }

        .checkbox2 input[type="checkbox"]:checked~label::after {
            -webkit-transform: rotate(-45deg) scale(1);
            transform: rotate(-45deg) scale(1);
        }

        .checkbox2 label {
            min-height: 34px;
            display: block;
            padding-left: 40px;
            margin-bottom: 0;
            font-weight: normal;
            cursor: pointer;
            vertical-align: sub;
        }

        .checkbox2 label span {
            position: absolute;
            top: 50%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
        }

        .checkbox2 input[type="checkbox"]:focus+label::before {
            outline: 0;
        }

        .ml-11 {
            margin-left: 9px;
            margin-top: 8px;
        }

        .text-color {
            color: #848484
        }

        .db-top-scroll {
            overflow-x: hidden;
            overflow-y: hidden;
            display: flex;
            flex-wrap: nowrap;
            flex-direction: row;
            align-content: center;
            justify-content: space-between;
            align-items: stretch;
            flex-wrap: nowrap !important;
            widows: 93%;
        }

        .db-top-selected-border .db-top-selected-border>i {
            /* border: 1px solid #01a34e; */
            color: #00a34e !important;
        }

        #globe-icon {
            /* border: 1px solid #01a34e; */
            color: #a6dfc1;
        }

        #globe-icon-i {
            /* border: 1px solid #01a34e; */
            color: #00a34e;
        }

        .scroll-tools {
            height: 5%;
            width: 4%;
            /* position: fixed; */
            padding-top: 1%;
            background: #fff;
            /* top: 5%; */
        }

        .scroll-tools-right {
            width: 5px;
            position: fixed;
            padding-top: 1%;
        }

        .scroll-tools-left {
            width: 5px;
            position: relative;
            padding-top: 1%;
        }

        .top-bar-container {
            width: 100%
        }
    </style>

    <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">

@endsection

@section('content')
    <livewire:tenant.client.main.index />
@endsection

@section('script')
    <script>
            const button = document.getElementById("scroll-right");
            button.onclick = () => {
                document.getElementById("scroll-db").scrollLeft -= 40;
            };

            const button2 = document.getElementById("scroll-left");
            button2.onclick = () => {
                document.getElementById("scroll-db").scrollLeft += 40;
            };
        </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: 'voice' });
            });

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

            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_voice.show(1000);
                myButton_none_voice.hide(1000);
                myButton_ticket.hide(1000);
                myButton_agent.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_agent.show();
                myButton_voice.hide(1000);
                myButton_none_voice.hide(1000);
                myButton_ticket.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>
@endsection