@extends('tenant.layouts.customer')


@section('title', 'Dashboard')


@section('style')
    @php
        $customerData = \App\Models\Tenant\CustomerPortalConfiguration::first();
    @endphp
    <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:  {{$customerData->primary}};
            border-color: {{$customerData->primary}};
        }
        /*.box:hover > #icon1  {*/
        /*    color: green;*/
        /*}*/
        /*document.querySelector("#box")*/
        /*document.querySelector("#box > div:nth-child(2) > div:nth-child(1) > button > i")*/
    </style>
    <style>

        .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 {{$customerData->primary}};
            border-left: 2px solid {{$customerData->primary}};
            -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: {{$customerData->primary}} transition: transform ease 0.25s;
            will-change: transform;
            position: absolute;
            top: 12px;
            left: 10px;
        }

        .checkbox2 input[type="checkbox"]:checked~label::before {
            color: {{$customerData->primary}};
        }

        .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 {{$customerData->primary}}; */
            color: {{$customerData->primary}} !important;
        }

        #globe-icon {
            /* border: 1px solid {{$customerData->primary}}; */
            color: {{$customerData->primary}};
        }

        #globe-icon-i {
            /* border: 1px solid {{$customerData->primary}}; */
            color: {{$customerData->primary}};
        }

        .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%
        }
        .greenIcon{
  color: {{$customerData->primary}};
  background-color: #e0f4ea;
  border: 1px solid  #e0f4ea;
  padding: 0px 15px 0px 15px;
  margin: 0px 0px 0px 15px;
  border-radius: 30px;
  text-align: center;
}
#accountsearch{
width: 100%;
background-color: white;
border: 0px ;
text-align: right;
position: relative;
float:right;

}


#accountsearchMenuReport{
  margin-top: 10px !important;

  border: 1px solid rgb(172, 172, 172);
  padding: 10px;

  border-radius: 10px;

  width: 250px;
    position: absolute;
    inset: 0px auto auto 0px;

    transform: translate3d(-122px, 47px, -2px)!important;
  }
  #accountsearchChooseTime{
  text-align: center;
  border: 2px solid {{$customerData->primary}};
  padding: 5px;
  border-radius: 10px;
  width: 100%;
  margin-bottom: 3% ;

}

#clearSubmitButton{
    width: 90%;
    text-align: center;
    margin-top: 9px;
}
.inputStyle{
  border: 1px solid rgb(172, 172, 172);
  padding: 10px;border-radius: 10px;
  background-color: #ffffff;
  width: 85%;

}
#fontStyle{
  color: #919191;
  font-size: 14px;
}
.dropDownLabel{
margin-bottom: 3%;
background-color: #fbfbfb;
}

#clear_submit_button{
  text-align: right;
}
#button{
  background-color: {{$customerData->primary}};
  border: 2px solid {{$customerData->primary}};
  border-radius: 10px;
  position: revert;

};

.btn-success {

--bs-btn-bg: {{$customerData->primary}};}


.centered{
position: absolute;
top: 50%;
left: 50%;
right: 0%;
}



.av_btn {
justify-content: center;
align-content: center;
display: inline-flex;
border-radius: 50%;
padding: 8px;
font-size: 20px;
line-height: 1.7em;
width: 50px;
height: 50px;
background-color:#bbbdc9;
font-weight: bold;
color:white;
border: 1px #bbbdc9 solid;
}
.av_btn_Week {
justify-content: center;
align-content: center;
display: inline-flex;
border-radius: 50%;
margin-left: 3px;
padding: 8px;
font-size: 18px;
line-height: 1.7em;
width: 40px;
height: 40px;
background-color:#bbbdc9;
font-weight: bold;
color:white;
border: 1px #bbbdc9 solid;
}

.td_value{
text-align: -webkit-right;
padding: 8px 34PX !important;
}
    </style>
    <style>

        .icon-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
        }

        .icon-style {
            font-size: 37px;
            color: #505050;
            transition: color 0.3s;
            margin: inherit;
        }

        .icon-style:hover {
            color: {{$customerData->primary}};
        }

    </style>
@endsection

@section('content')
    <div class="px-3">

        <livewire:tenant.customer.main.index />
    </div>


@endsection

@section('script')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></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 myButton_survey = $('#survey');
            // var myButton_chatbot = $('#chatbot');
            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');













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

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

                upmod_2.hide();
                downmod_2.show();
            });

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




        });

        const colors = {
            green: {
                default: "{{$customerData->primary}}",
                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: '{{$customerData->primary}}',
                    //  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.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',
            ]
            OCdata.datasets[0].data = todayData;
            OCdata.datasets[0].label = "Today";
            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();
        }

        function updateGraphData1(dayOfMonth,month) {
            OCdata.labels = dayOfMonth;
            OCdata.datasets[0].data = month;
            OCdata.datasets[0].label = null;
            OCdata.datasets[1].data = null;

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

        }

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

        window.addEventListener('graph2', (event) => {
            const {dayOfMonth, month } = event.detail;
            console.log(dayOfMonth)
            updateGraphData1(dayOfMonth,month);
        });

       $("#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>
        const ctx = document.getElementById('chartjscontainer');
        const data = {
            labels: [
                'Average resolution time ',
                'Resolution within SLA ',
                // 'Reopened tickets'
            ],
            datasets: [{
                data: [{{$art}}, {{$rws}}],
                backgroundColor: [
                    '{{$customerData->primary}}',
                    '#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 type="module">
        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) => {

            console.log($(event.target).parent().css({ "border-color": "#39b373"}));
        })

    </script>
    <script>
        function toggleContent(element) {

            if ($('#ticket-comments').css('display') == 'block') {
                $('#ticket-comments').css('display', 'none');

                element.src = "https://gen01.extensyaidesk-sa.com/tenancy/assets/img/down-arrow2.png";
            } else {
                $('#ticket-comments').css('display', 'block');
                element.src = "https://gen01.extensyaidesk-sa.com/tenancy/assets/img/up-arrow2.png";


            }
        }
    </script>
@endsection