@extends('admin.layout.default')

@section('title', 'Dashboard')

@section('styles')
    <link href="{{ asset('css/libs/coreui-chartjs/coreui-chartjs.min.css') }}" rel="stylesheet">
{{--    <link rel="stylesheet" href="https://unpkg.com/@coreui/icons/css/flag.min.css">--}}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@coreui/icons@2.1.0/css/flag.min.css" integrity="sha256-wNdi069aN6vDjIJnYjY7Db5esGcnOUsBB1aIMKxHf3E=" crossorigin="anonymous">
    <!-- edit style.css for dashboard -->
    <style>

        html {
            -webkit-tap-highlight-color: rgba(0,0,21,0);
        }
        .c-app, body {
            background-color: #ebedef;
            color: #3c4b64;
        }
        [class^=bg-] {
            color: #fff;
        }
        [class^=text-value] {
            font-weight: 600;
        }
        [dir=rtl] .mfs-3, html:not([dir=rtl]) .mfe-3 {
            margin-right: 1rem!important;
        }
        .row {
            display: -ms-flexbox;
            -ms-flex-wrap: wrap;
            margin-right: -15px;
            margin-left: -15px;
        }
        .col, .col-1, .col-10, .col-11, .col-12,
        .col-2, .col-3, .col-4, .col-5, .col-6,
        .col-7, .col-8, .col-9, .col-auto, .col-lg,
        .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2,
        .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7,
        .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1,
        .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3,
        .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8,
        .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10,
        .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4,
        .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9,
        .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11,
        .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5,
        .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
            padding-right: 15px;
            padding-left: 15px;
        }
        @media (min-width: 576px){
            .col-sm-6 {
                -ms-flex: 0 0 50%;
            }
        }
        @media (min-width: 992px){
            .col-lg-3 {
                -ms-flex: 0 0 25%;
            }
        }

        .bg-primary {
            background-color: #321fdb!important;
        }
        .text-primary {
            color: #321fdb!important;
        }
        .text-muted {
            color: #768192!important;
        }
        .bg-info {
            background-color: #39f!important;
        }
        .text-info {
            color: #39f!important;
        }
        .bg-warning {
            background-color: #f9b115!important;
        }
        .text-warning {
            color: #f9b115!important;
        }
        .bg-danger {
            background-color: #e55353!important;
        }
        .text-danger {
            color: #e55353!important;
        }
        .bg-success {
            background-color: #2eb85c!important;
        }
        .text-success {
            color: #2eb85c!important;
        }

        .card.bg-primary {
            border-color: #2517a3;
        }
        .card.bg-info {
            border-color: #0079f2;
        }
        .card.bg-warning {
            border-color: #c98b05;
        }
        .card.bg-danger {
            border-color: #d82121;
        }

        .card-body {
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            min-height: 1px;
            padding: 1.25rem;
        }
        .card-header {
            padding: .75rem 1.25rem;
            border-bottom: 1px solid;
            border-color: #d8dbe0;
        }
        .card-footer:last-child {
            border-radius: 0 0 calc(.25rem - 1px) calc(.25rem - 1px);
        }
        .card-footer {
            padding: .75rem 1.25rem;
            border-top: 1px solid;
            background-color: #fff;
            border-color: #d8dbe0;
        }

        .d-none {
            display: none!important;
        }
        @media (min-width: 768px)
        {
            .d-md-block {
                display: block!important;
            }
        }
        @media (min-width: 576px)
        {
            .d-sm-block {
                display: block!important;
            }
        }
        .btn-toolbar {
            display: -ms-flexbox;
            -ms-flex-wrap: wrap;
            -ms-flex-pack: start;
        }

        .btn-primary {
            color: #fff;
            background-color: #321fdb;
            border-color: #321fdb;
        }

        .btn-outline-secondary {
            color: #ced2d8;
            border-color: #ced2d8;
        }
        .btn-outline-secondary:not(:disabled):not(.disabled).active,
        .btn-outline-secondary:not(:disabled):not(.disabled):active,
        .show>.btn-outline-secondary.dropdown-toggle {
            color: #4f5d73;
            background-color: #ced2d8;
            border-color: #ced2d8;
        }
        .btn-outline-secondary:hover {
            color: #4f5d73;
            background-color: #ced2d8;
            border-color: #ced2d8;
        }

        .table {
            width: 100%;
            margin-bottom: 1rem;
            color: #4f5d73;
        }

        .table .thead-light th {
            color: #768192;
            background-color: #d8dbe0;
            border-color: #d8dbe0;
        }
        .table thead th {
            border-bottom: 2px solid;
            border-bottom-color: #d8dbe0;
        }

        .table-hover tbody tr:hover {
            color: #4f5d73;
            background-color: rgba(0,0,21,.075);
        }


        html:not([dir=rtl]) .c-callout {
            border-left: 4px solid #d8dbe0;
        }
        .c-callout {
            position: relative;
            padding: 0 1rem;
            margin: 1rem 0;
            border-radius: .25rem;
        }
        .text-value-lg {
            font-size: 1.3125rem;
        }
        html:not([dir=rtl]) .c-callout-info {
            border-left-color: #39f;
        }
        html:not([dir=rtl]) .c-callout-danger {
            border-left-color: #e55353;
        }
        html:not([dir=rtl]) .c-callout-warning {
            border-left-color: #f9b115;
        }
        html:not([dir=rtl]) .c-callout-success {
            border-left-color: #2eb85c;
        }

        .progress-group {
            display: -ms-flexbox;
            -ms-flex-flow: row wrap;
        }
        .progress-group-header {
            display: -ms-flexbox;
            -ms-flex-preferred-size: 100%;
            -ms-flex-align: end;
        }
        .progress-xs {
            height: 4px;
        }
        .progress, .progress-bar {
            display: -ms-flexbox;
            display: flex;
            overflow: hidden;
        }
        .progress {
            font-size: .65625rem;
            border-radius: .25rem;
            background-color: #ebedef;
        }

        .progress-bar {
            -ms-flex-direction: column;
            flex-direction: column;
            -ms-flex-pack: center;
            justify-content: center;
            text-align: center;
            white-space: nowrap;
            transition: width .6s ease;
            color: #fff;
            background-color: #321fdb;
        }

        .c-icon {
            display: inline-block;
            color: inherit;
            text-align: center;
            fill: currentColor;
        }
        .c-icon:not(.c-icon-c-s):not(.c-icon-custom-size) {
            width: 1rem;
            height: 1rem;
            font-size: 1rem;
        }

        .ml-auto, .mx-auto, html:not([dir=rtl]) .mfs-auto {
            margin-left: auto!important;
        }
        [dir=rtl] .mfs-2, html:not([dir=rtl]) .mfe-2 {
            margin-right: .5rem!important;
        }

        .btn .c-icon, .btn i {
            width: .875rem;
            height: .875rem;
            margin: .21875rem 0;
        }
        .btn-primary.focus, .btn-primary:focus {
            box-shadow: 0 0 0 0.2rem rgba(81, 65, 224, 0.5);
        }
        .btn-primary.focus, .btn-primary:focus, .btn-primary:hover {
            color: #fff;
            background-color: #2a1ab9;
            border-color: #2819ae;
        }
        .btn-outline-secondary:not(:disabled):not(.disabled).active:focus, .btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .show>.btn-outline-secondary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(206, 210, 216, 0.5);
        }
        .btn-outline-secondary.focus, .btn-outline-secondary:focus {
            box-shadow: 0 0 0 0.2rem rgba(206, 210, 216, 0.5);
        }
        .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
            color: #fff;
            background-color: #2819ae;
            border-color: #2517a3;
        }

        .dropdown-toggle {
            white-space: nowrap;
        }
        .btn-transparent {
            color: rgba(255,255,255,.8);
        }
        [dir=rtl] .dropdown-menu-left, html:not([dir=rtl]) .dropdown-menu-right {
            right: 0;
            left: auto;
        }
        .dropdown-menu {
            position: absolute;
            top: 100%;
            z-index: 1000;
            display: none;
            float: left;
            min-width: 10rem;
            padding: .5rem 0;
            margin: .125rem 0 0;
            font-size: .875rem;
            text-align: left;
            list-style: none;
            background-clip: padding-box;
            border: 1px solid #d8dbe0;
            border-radius: .25rem;
            color: #4f5d73;
            background-color: #fff;
        }
        .dropdown-item {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
            align-items: center;
            width: 100%;
            padding: .5rem 1.25rem;
            clear: both;
            font-weight: 400;
            text-align: inherit;
            white-space: nowrap;
            background-color: transparent;
            border: 0;
            color: #4f5d73;
        }
        .dropdown-item.active, .dropdown-item:active {
            text-decoration: none;
            color: #fff;
            background-color: #321fdb;
        }

        .dropdown-item:hover, .dropdown-item:focus {
            outline: unset;
        }

        :root {
            --primary: #321fdb;
            --secondary: #ced2d8;
            --success: #2eb85c;
            --info: #39f;
            --warning: #f9b115;
            --danger: #e55353;
            --light: #ebedef;
            --dark: #636f83;
            --breakpoint-xs: 0;
            --breakpoint-sm: 576px;
            --breakpoint-md: 768px;
            --breakpoint-lg: 992px;
            --breakpoint-xl: 1200px;
            --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
            --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
        }

        .btn-outline-secondary:not(:disabled):not(.disabled).active, .btn-outline-secondary:not(:disabled):not(.disabled):active, .show>.btn-outline-secondary.dropdown-toggle {
            color: #4f5d73;
            background-color: #ced2d8;
            border-color: #ced2d8;
        }

        a, a:hover {
            color: #321fdb;
        }

        .c-avatar {
            position: relative;
            display: -ms-inline-flexbox;
            display: inline-flex;
            -ms-flex-align: center;
            align-items: center;
            -ms-flex-pack: center;
            justify-content: center;
            border-radius: 50em;
            width: 36px;
            height: 36px;
            font-size: 14.4px;
        }

        .c-icon:not(.c-icon-c-s):not(.c-icon-custom-size).c-icon-xl {
            width: 1.5rem;
            height: 1.5rem;
            font-size: 1.5rem;
        }
        .c-icon:not(.c-icon-c-s):not(.c-icon-custom-size).c-icon-2xl {
            width: 2rem;
            height: 2rem;
            font-size: 2rem;
        }
        [class*=" cif-"], [class^=cif-] {
            background-size: contain;
            background-position: 50%;
            background-repeat: no-repeat;
            position: relative;
            display: inline-block;
            width: 1.33333333em;
            line-height: 1em;
        }

        .page-link:hover {
            z-index: 2;
            text-decoration: none;
            color: #0643e9;
            background-color: #d8dbe0;
            border-color: #c4c9d0;
        }

        @media (max-width: 421px)
        {
            .welcome-quote blockquote {
                font-size: 20px;
                margin-left: 30px;
                margin-right: 30px;
            }

            .welcome-quote blockquote cite {
                font-size: 15px;
            }
        }

        /*tooltip special*/
        .tooltip .tooltip-inner{
            background: purple;
        }
        .bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^=top] .arrow::before {
            border-top-color: purple;
        }
        .bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^=bottom] .arrow::before {
            border-bottom-color: purple;
        }
        .bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^=right] .arrow::before {
            border-right-color: purple;
        }
        .bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^=left] .arrow::before {
            border-left-color: purple;
        }

        .bs-tooltip-right, .bs-tooltip-auto[x-placement^=right] {
            padding: 0 5px;
        }

    </style>

@endsection

@section('bottom-scripts')

    @canany(['admin.dashboard.segmented-data', 'admin.dashboard.total-site-traffic', 'admin.dashboard.traffic-analytics', 'admin.dashboard.traffic-logs'])
        <!--[if IE]><!-->
        {{--<script defer src="https://unpkg.com/@coreui/icons/js/svgxuse.js"></script>--}}
        <script src="https://cdn.jsdelivr.net/npm/@coreui/icons@2.1.0/js/svgxuse.min.js" integrity="sha256-tCx6ygDHrbdfroF/5Ld7RMT+Onu617HQPfUtywgLpSg=" crossorigin="anonymous"></script>
        <!--<![endif]-->
        <script src="{{ asset('js/libs/coreui-chartjs/coreui-chartjs.bundle.min.js') }}"></script>
        <script src="{{ asset('js/coreui-utils.js') }}"></script>

        <!-- Selector Button Active Class Changer Function -->
        <script type="module">
            function handleAnalyticsButtonClick(selector) {
                $(selector).on('click', function() {
                    $(selector).removeClass('active');
                    $(this).addClass('active');
                });
            }

            handleAnalyticsButtonClick('#analyticsButtonGroup1 .analyticsButton');
            handleAnalyticsButtonClick('#analyticsButtonGroup2 .analyticsButton');
            handleAnalyticsButtonClick('#analyticsButtonGroup3 .analyticsButton');
            handleAnalyticsButtonClick('#analyticsButtonGroup4 .analyticsButton');
        </script>

        <!-- Daily and Weekly Traffic Data By Models Charts (Introduction Section - Cards) -->
        <script type="module">
            let dailyTrafficDataByModels = @json($dailyTrafficDataByModel);
            let weeklyTrafficDataByModels = @json($weeklyTrafficDataByModel);

            const EMPTY_DATA_SET = {"page_views": {"data": [], "label": [], "peekMax": 0, "totalCount": 0}, "visitors": {"data": 0, "label": [], "peekMax": 0, "totalCount": 0}};
            window.EMPTY_DATA_SET = EMPTY_DATA_SET;

            // Load card total counts at document ready
            $(document).ready(function() {
                updateTrafficDataByModelCard(cardChart1, dailyTrafficDataByModels, 'corporate', '#card1');
                updateTrafficDataByModelCard(cardChart2, dailyTrafficDataByModels, 'service', '#card2');
                updateTrafficDataByModelCard(cardChart3, dailyTrafficDataByModels, 'project', '#card3');
                updateTrafficDataByModelCard(cardChart4, dailyTrafficDataByModels, 'dynamicpage', '#card4');
            });

            // # Card 1
            var cardChart1 = new Chart(document.getElementById('card-chart1') ?? '', {
                type: 'line',
                data: {
                    labels: 0,
                    datasets: [
                        {
                            label: '{{ trans('admin.dashboard.page_views') }}',
                            backgroundColor: 'transparent',
                            borderColor: 'rgba(255,255,255,.55)',
                            pointBackgroundColor: coreui.Utils.getStyle('--primary'),
                            data: 0,
                        },
                        {
                            label: '{{ trans('admin.dashboard.number_of_visitors') }}',
                            backgroundColor: 'transparent',
                            borderColor: 'rgba(255,255,255,.55)',
                            pointBackgroundColor: '#503dff',
                            data: 0,
                        }
                    ]
                },
                options: {
                    maintainAspectRatio: false,
                    legend: {display: false},
                    scales: {
                        xAxes: [{
                            gridLines: {color: 'transparent', zeroLineColor: 'transparent'},
                            ticks: {fontSize: 2, fontColor: 'transparent'}
                        }],
                        yAxes: [{
                            display: false,
                            ticks: {
                                display: false, min: 0, max: 1,
                            }
                        }]
                    },
                    elements: {line: {borderWidth: 1}, point: {radius: 4, hitRadius: 10, hoverRadius: 4}}
                }
            });

            function updateChart11() {
                // console.log('updateChart11');
                updateTrafficDataByModelCard(cardChart1, dailyTrafficDataByModels, 'corporate', '#card1');
            }
            window["updateChart11"] = updateChart11;

            function updateChart12() {
                // console.log('updateChart12');
                updateTrafficDataByModelCard(cardChart1, weeklyTrafficDataByModels, 'corporate', '#card1');
            }
            window["updateChart12"] = updateChart12;

            // # Card 2
            var cardChart2 = new Chart(document.getElementById('card-chart2') ?? '', {
                type: 'line',
                data: {
                    labels: 0,
                    datasets: [
                    {
                        label: '{{ trans('admin.dashboard.page_views') }}',
                        backgroundColor: 'transparent',
                        borderColor: 'rgba(255,255,255,.55)',
                        pointBackgroundColor: coreui.Utils.getStyle('--info'),
                        data: 0,
                    },{
                        label: '{{ trans('admin.dashboard.number_of_visitors') }}',
                        backgroundColor: 'transparent',
                        borderColor: 'rgba(255,255,255,.55)',
                        pointBackgroundColor: '#40b7fd',
                        data: 0,
                    }]
                },
                options: {
                    maintainAspectRatio: false,
                    legend: {display: false},
                    scales: {
                        xAxes: [{
                            gridLines: {color: 'transparent', zeroLineColor: 'transparent'},
                            ticks: {fontSize: 2, fontColor: 'transparent'}
                        }], yAxes: [{display: false, ticks: {display: false, min: 0, max: 1} }]
                    },
                    elements: {line: {tension: 0.00001, borderWidth: 1}, point: {radius: 4, hitRadius: 10, hoverRadius: 4}}
                }
            });

            function updateChart21() {
                // console.log('updateChart21');
                updateTrafficDataByModelCard(cardChart2, dailyTrafficDataByModels, 'service', '#card2');
            }
            window["updateChart21"] = updateChart21;

            function updateChart22() {
                // console.log('updateChart22');
                updateTrafficDataByModelCard(cardChart2, weeklyTrafficDataByModels, 'service', '#card2');
            }
            window["updateChart22"] = updateChart22;

            // # Card 3
            var cardChart3 = new Chart(document.getElementById('card-chart3') ?? '', {
                type: 'line',
                data: {
                    labels: 0,
                    datasets: [
                        {
                            label: '{{ trans('admin.dashboard.page_views') }}',
                            backgroundColor: 'rgba(255,255,255,.2)',
                            borderColor: 'rgba(255,255,255,.55)',
                            data: 0,
                        },{
                            label: '{{ trans('admin.dashboard.number_of_visitors') }}',
                            backgroundColor: 'rgba(255,255,255,.4)',
                            borderColor: 'rgba(255,255,255,.55)',
                            data: 0,
                        }
                    ]
                },
                options: {
                    maintainAspectRatio: false,
                    legend: {display: false},
                    scales: {xAxes: [{display: false}], yAxes: [{display: false, ticks: {max: 1} }]},
                    elements: {line: {borderWidth: 2}, point: {radius: 0, hitRadius: 10, hoverRadius: 4}}
                }
            });

            function updateChart31() {
                // console.log('updateChart31');
                updateTrafficDataByModelCard(cardChart3, dailyTrafficDataByModels, 'project', '#card3');
            }
            window["updateChart31"] = updateChart31;

            function updateChart32() {
                // console.log('updateChart32');
                updateTrafficDataByModelCard(cardChart3, weeklyTrafficDataByModels, 'project', '#card3');
            }
            window["updateChart32"] = updateChart32;

            // # Card 4
            var cardChart4 = new Chart(document.getElementById('card-chart4') ?? '', {
                type: 'bar',
                data: {
                    labels: 0,
                    datasets: [
                        {
                            label: '{{ trans('admin.dashboard.page_views') }}',
                            backgroundColor: 'rgba(255,255,255,.2)',
                            borderColor: 'rgba(255,255,255,.55)',
                            data: 0,
                            barPercentage: 0.6
                        },{
                            label: '{{ trans('admin.dashboard.number_of_visitors') }}',
                            backgroundColor: 'rgba(255,255,255,.4)',
                            borderColor: 'rgba(255,255,255,.55)',
                            data: 0,
                            barPercentage: 0.6,
                            type: 'scatter'
                        }]
                },
                options: {
                    maintainAspectRatio: false,
                    legend: {display: false},
                    scales: {xAxes: [{display: false}], yAxes: [{display: false, ticks: {max: 1} }]},
                }
            });

            function updateChart41() {
                // console.log('updateChart41');
                updateTrafficDataByModelCard(cardChart4, dailyTrafficDataByModels, 'dynamicpage', '#card4');
            }
            window["updateChart41"] = updateChart41;

            function updateChart42() {
                // console.log('updateChart42');
                updateTrafficDataByModelCard(cardChart4, weeklyTrafficDataByModels, 'dynamicpage', '#card4');
            }
            window["updateChart42"] = updateChart42;
        </script>

        <!-- Helper functions of "Traffic Data By Model" Card Charts -->
        <script type="module">
            // ## Set Empt Data Function
            function setTrafficDataByModelEmptyData(data, modelType) {
                if (! data[modelType]) {
                    data[modelType] = EMPTY_DATA_SET;
                }
            }
            window["setTrafficDataByModelEmptyData"] = setTrafficDataByModelEmptyData;

            // ## Update "Traffic Data By Model" Card Chart Function
            function updateTrafficDataByModelCardChart(chart, data, modelType) {
                // Perform action for each data set
                for (let key in data) {
                    let dataSet = data[key];

                    if(modelType === key) {
                        if (dataSet?.page_views) {
                            if (chart?.data) {
                                chart.data.datasets[0].data = dataSet.page_views.data;
                                chart.data.datasets[1].data = dataSet.visitors.data;
                                chart.data.labels = dataSet.page_views.label;
                                chart.options.scales.yAxes[0].ticks.max = dataSet.page_views.peekMax + 1;
                                chart.update()
                            }
                        }
                    }
                }
            }
            window["updateTrafficDataByModelCardChart"] = updateTrafficDataByModelCardChart;

            // ## All Update Functions of "Traffic Data By Model" Card Charts
            function updateTrafficDataByModelCard(chart, data, modelType, cardId) {
                // Set Empty Data
                setTrafficDataByModelEmptyData(data, modelType);

                // Update "Traffic Data By Model" Card Chart Function
                updateTrafficDataByModelCardChart(chart, data, modelType);

                // Update Card Counter Animation Function
                counterAnimation(data[modelType]?.page_views.totalCount, cardId);
            }
            window["updateTrafficDataByModelCard"] = updateTrafficDataByModelCard;
        </script>

        <!-- Website Total Traffic Data Line Charts (Primary Section) -->
        <script type="module">
            const dailyData = @json($allTrafficData['daily']);
            const weeklyData =  @json($allTrafficData['weekly']);
            const monthlyData = @json($allTrafficData['monthly']);
            const yearlyData = @json($allTrafficData['yearly']);
            const previousYearlyData = @json($previousYearlyTotalTrafficCounts);

            Chart.defaults.global.pointHitDetectionRadius = 1;
            Chart.defaults.global.tooltips.enabled = false;
            Chart.defaults.global.tooltips.mode = 'index';
            Chart.defaults.global.tooltips.position = 'nearest';
            Chart.defaults.global.tooltips.custom = coreui.ChartJS.customTooltips;
            Chart.defaults.global.defaultFontColor = '#646470';
            Chart.defaults.global.responsiveAnimationDuration = 1;

            var mainChart = new Chart(document.getElementById('main-chart') ?? '', {
                type: 'line',
                data: {
                    labels: 0,
                    datasets: [{
                        label: '{{ trans('admin.dashboard.page_views') }}',
                        backgroundColor: coreui.Utils.hexToRgba(coreui.Utils.getStyle('--info'), 10),
                        borderColor: coreui.Utils.getStyle('--info'),
                        pointHoverBackgroundColor: '#fff',
                        borderWidth: 2,
                        data: 0,
                    }, {
                        label: '{{ trans('admin.dashboard.number_of_visitors') }}',
                        backgroundColor: 'transparent',
                        borderColor: coreui.Utils.getStyle('--success'),
                        pointHoverBackgroundColor: '#fff',
                        borderWidth: 2,
                        data: 0,
                    },
                    //     {
                    //     label: 'My Third dataset',
                    //     backgroundColor: 'transparent',
                    //     borderColor: coreui.Utils.getStyle('--danger'),
                    //     pointHoverBackgroundColor: '#fff',
                    //     borderWidth: 1,
                    //     borderDash: [8, 5],
                    //     data: [65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65]
                    // }
                    ]
                },
                options: {
                    maintainAspectRatio: false,
                    legend: {display: false},
                    scales: {
                        xAxes: [{
                                gridLines: {drawOnChartArea: false},
                                ticks:{ //smartek.fixed.06072021
                                    autoSkip: true,
                                    maxTicksLimit: 30,
                                }
                            }
                        ],
                        yAxes: [
                            {
                                ticks:
                                    {
                                        autoSkipPadding: 15,
                                        beginAtZero: true,
                                        maxTicksLimit: 10,
                                        stepSize: Math.ceil(1),
                                        max: 1,
                                    }
                            }]
                    },
                    elements: {point: {radius: 0, hitRadius: 10, hoverRadius: 4, hoverBorderWidth: 3}}
                }
            });
            window["mainChart"] = mainChart;

            $(document).ready(function() {
                // Update Website Total Traffic Data Set
                updateWebsiteTotalTrafficDataSet(yearlyData, previousYearlyData, true);
                updateWebsiteTotalTrafficDataSet(monthlyData, yearlyData);
                updateWebsiteTotalTrafficDataSet(weeklyData, monthlyData);
                updateWebsiteTotalTrafficDataSet(dailyData, weeklyData, true);

                // Update Website Total Traffic Chart
                updateWebsiteTotalTrafficChart(dailyData);

                // Updata Website Total Traffic Cards
                updateWebsiteTotalTrafficCards(dailyData);
            });

            $("#optionDay").click(function() {
                // Update Website Total Traffic Chart
                updateWebsiteTotalTrafficChart(dailyData);

                // Updata Website Total Traffic Cards
                updateWebsiteTotalTrafficCards(dailyData);
            });

            $("#optionWeek").click(function() {
                // Update Website Total Traffic Chart
                updateWebsiteTotalTrafficChart(weeklyData);

                // Updata Website Total Traffic Cards
                updateWebsiteTotalTrafficCards(weeklyData);
            });

            $("#optionMonth").click(function() {
                // Update Website Total Traffic Chart
                updateWebsiteTotalTrafficChart(monthlyData);

                // Updata Website Total Traffic Cards
                updateWebsiteTotalTrafficCards(monthlyData);
            });

            $("#optionYear").click(function(){
                // Update Website Total Traffic Chart
                updateWebsiteTotalTrafficChart(yearlyData);

                // Updata Website Total Traffic Cards
                updateWebsiteTotalTrafficCards(yearlyData);
            });
        </script>

        <!-- Helper functions of "Website Total Traffic Data" Charts -->
        <script type="module">
            function updateWebsiteTotalTrafficDataSet(data, parentPeriodData, totalMode = false) {
                // Her bir veri seti için işlem yap
                for (let key in data) {
                    let dataSet = data[key];
                    let nonZeroValues = dataSet.data.filter(num => num !== 0); // Filter non-0 numbers

                    // totalCount değerini hesapla
                    dataSet.totalCount = dataSet.data.reduce((a, b) => a + b, 0); // find the total

                    // peekMax değerini hesapla
                    dataSet.peekMax = Math.max(...dataSet.data);

                    if (nonZeroValues.length > 0) { // If there are non-0 values
                        let sum = nonZeroValues.reduce((a, b) => a + b, 0); // find the total
                        let average = sum / nonZeroValues.length; // Calculate average
                        dataSet.averageCount = average; // Add the mean to the data set

                        if (parentPeriodData) {
                            // if there is no averageCount it is previousYearlyData
                            let previousAverage = parentPeriodData[key].averageCount ?? parentPeriodData[key];
                            let percentageChange;

                            if (previousAverage) {
                                if (totalMode == false) {
                                    percentageChange = ((average - previousAverage) / previousAverage) * 100;
                                } else {
                                    percentageChange = ((dataSet.totalCount - previousAverage) / previousAverage) * 100;
                                }
                            } else {
                                percentageChange = 0;
                            }

                            dataSet.percentageChange = percentageChange; // Add percentage change to data set
                        }
                    }
                }
            }
            window["updateWebsiteTotalTrafficDataSet"] = updateWebsiteTotalTrafficDataSet;

            // ## Update "Website Total Traffic Data" Chart Function
            function updateWebsiteTotalTrafficChart(data) {
                mainChart.data.datasets[0].data = data.page_views.data;
                mainChart.data.datasets[1].data = data.visitors.data;
                mainChart.data.labels = data.page_views.label;
                mainChart.options.scales.yAxes[0].ticks.max = data.page_views.peekMax + 1;
                mainChart.update()
            }
            window["updateWebsiteTotalTrafficChart"] = updateWebsiteTotalTrafficChart;

            // ## Updata "Website Total Traffic Data" Cards Function
            function updateWebsiteTotalTrafficCards(data) {
                // Card Counter
                counterAnimation(data.page_views.totalCount, '#totalcountpageviews' );
                counterAnimation(data.visitors.totalCount, '#totalcountvisitors' );

                // Percentage Change
                counterAnimation(data.page_views.percentageChange, '#bounceratepageviews' );
                counterAnimation(data.visitors.percentageChange, '#bounceratevisitors' );

                // Toggle Arrow Icon
                typeBounceRateToggleColorIcon(data.page_views.percentageChange, "#bounceratepageviewsicon", "#bounceratepageviewscolor" );
                typeBounceRateToggleColorIcon(data.visitors.percentageChange, "#bounceratevisitorsicon", "#bounceratevisitorscolor" );

                // Bars Width Animation
                counterAnimationBar(Math.abs(data.page_views.percentageChange), "#totalcountpageviewsbar");
                counterAnimationBar(Math.abs(data.visitors.percentageChange), "#totalcountvisitorsbar");

                // Bar Class Toggle (negative and positive)
                typeBounceRateBarsToggle(data.page_views.percentageChange, data.visitors.percentageChange, "#totalcountpageviewsbar", "#totalcountvisitorsbar");
            }
            window["updateWebsiteTotalTrafficCards"] = updateWebsiteTotalTrafficCards;
        </script>

        <!-- Traffic Analysis Bar Charts (Secondary Section) -->
        <script type="module">
            $(document).ready(function() {
                // # Update Widget - Visitor Counts Group by Device
                const dailyAnalyticsCountsByDevice = @json($analyticsVisitorByDeviceCounts['daily']);

                // Update Visitor Counts Group by Device
                updateVisitorCountsByDevice(dailyAnalyticsCountsByDevice);

                // # REFERRER SECTION #
                const dailyReferrerData = @json($referrerByTypeCounts['daily']);

                // Update Referrer List
                updateReferrerList(dailyReferrerData);

                // Update #Best Referrer Card
                updateBestReferrerCard(dailyReferrerData);
            });

            $("#optionBarDay").click(function() {
                // # Visitor Counts Group by Device Widget #
                const dailyAnalyticsCountsByDevice = @json($analyticsVisitorByDeviceCounts['daily']);

                // Update Visitor Counts Group by Device
                updateVisitorCountsByDevice(dailyAnalyticsCountsByDevice);

                // # TOP 10 List #
                const mostViewedPagesDailyData = @json($topTenMostViewedPagesCounts['daily']);

                // Most List Send data to update function
                updateMostViewedPages(mostViewedPagesDailyData);

                // Most List #Best Pageview and Visitor Card Update
                updateBestPageviewAndVisitorCards(mostViewedPagesDailyData);

                // # REFERRER SECTION #
                const dailyReferrerData = @json($referrerByTypeCounts['daily']);

                // Update Referrer List
                updateReferrerList(dailyReferrerData);

                // Update #Best Referrer Card
                updateBestReferrerCard(dailyReferrerData);
            });

            $("#optionBarWeek").click(function() {
                // # Visitor Counts Group by Device Widget #
                const weeklyAnalyticsCountsByDevice = @json($analyticsVisitorByDeviceCounts['weekly']);

                // Update Visitor Counts Group by Device
                updateVisitorCountsByDevice(weeklyAnalyticsCountsByDevice);

                // # TOP 10 List #
                const mostViewedPagesWeeklyData = @json($topTenMostViewedPagesCounts['weekly']);

                // Most List Send data to update function
                updateMostViewedPages(mostViewedPagesWeeklyData);

                // Most List #Best Pageview and Visitor Card Update
                updateBestPageviewAndVisitorCards(mostViewedPagesWeeklyData);

                // # REFERRER SECTION #
                const weeklyReferrerData = @json($referrerByTypeCounts['weekly']);

                // Update Referrer List
                updateReferrerList(weeklyReferrerData);

                // Update #Best Referrer Card
                updateBestReferrerCard(weeklyReferrerData);
            });

            $("#optionBarMonth").click(function() {
                // # Visitor Counts Group by Device Widget #
                const monthlyAnalyticsCountsByDevice = @json($analyticsVisitorByDeviceCounts['monthly']);

                // Update Visitor Counts Group by Device
                updateVisitorCountsByDevice(monthlyAnalyticsCountsByDevice);

                // # TOP 10 List #
                const mostViewedPagesMonthlyData = @json($topTenMostViewedPagesCounts['monthly']);

                // Most List Send data to update function
                updateMostViewedPages(mostViewedPagesMonthlyData);

                // Most List #Best Pageview and Visitor Card Update
                updateBestPageviewAndVisitorCards(mostViewedPagesMonthlyData);

                // # REFERRER SECTION #
                const monthlyReferrerData = @json($referrerByTypeCounts['monthly']);

                // Update Referrer List
                updateReferrerList(monthlyReferrerData);

                // Update #Best Referrer Card
                updateBestReferrerCard(monthlyReferrerData);
            });

            $("#optionBarYear").click(function() {
                // # Visitor Counts Group by Device Widget #
                const yearlyAnalyticsCountsByDevice = @json($analyticsVisitorByDeviceCounts['yearly']);

                // Update Visitor Counts Group by Device
                updateVisitorCountsByDevice(yearlyAnalyticsCountsByDevice);

                // # TOP 10 List #
                const mostViewedPagesYearlyData = @json($topTenMostViewedPagesCounts['yearly']);

                // Most List Send data to update function
                updateMostViewedPages(mostViewedPagesYearlyData);

                // Most List #Best Pageview and Visitor Card Update
                updateBestPageviewAndVisitorCards(mostViewedPagesYearlyData);

                // # REFERRER SECTION #
                const yearlyReferrerData = @json($referrerByTypeCounts['yearly']);

                // Update Referrer List
                updateReferrerList(yearlyReferrerData);

                // Update #Best Referrer Card
                updateBestReferrerCard(yearlyReferrerData);
            });
        </script>

        <!-- Helper functions of "Visitor Counts Group by Device" Lists -->
        <script type="module">
            // ## Update "Visitor Counts Group by Device" Widget Function
            function updateVisitorCountsByDevice(data) {
                let mobileCount = (data.find(data => data.is_mobile === 1) || { count: 0 });
                let desktopCount = (data.find(data => data.is_mobile === 0) || { count: 0 });

                let totalCount = mobileCount.count + desktopCount.count;

                let mobilePercent = totalCount > 0 ? mobileCount.count / totalCount * 100 : 0;
                let desktopPercent = totalCount > 0 ? desktopCount.count / totalCount * 100 : 0;

                let isHigherDesktop = desktopCount.count > mobileCount.count;

                counterAnimation(isHigherDesktop ? desktopCount.count : mobileCount.count, '#devicebar');

                counterAnimationBar(isHigherDesktop ? desktopPercent : mobilePercent, '#deviceProgress0');
                counterAnimationBar(! isHigherDesktop ? desktopPercent : mobilePercent, '#deviceProgress1');
                counterAnimation(isHigherDesktop ? desktopCount.count : mobileCount.count, '#devicebarcount0');
                counterAnimation(! isHigherDesktop ? desktopCount.count : mobileCount.count, '#devicebarcount1');
                counterAnimation(isHigherDesktop ? desktopPercent : mobilePercent, '#devicebarcountPercent0');
                counterAnimation(! isHigherDesktop ? desktopPercent : mobilePercent, '#devicebarcountPercent1');

                // by Device Text and Icon Toggle
                let deviceText = isHigherDesktop ? '{{ trans('admin.dashboard.desktop') }}' : '{{ trans('admin.dashboard.mobile') }}';
                let lowerText = isHigherDesktop ? '{{ trans('admin.dashboard.mobile') }}' : '{{ trans('admin.dashboard.desktop') }}';

                typeSentence(deviceText, "#devicetext0", 20);
                typeSentence(deviceText, "#devicebartext0", 20);
                typeSentence(lowerText, "#devicebartext1", 20);

                typeDeviceToggleIcon(deviceText, "#deviceBarIcon0");
                typeDeviceToggleIcon(lowerText, "#deviceBarIcon1");
            }
            window["updateVisitorCountsByDevice"] = updateVisitorCountsByDevice;
        </script>

        <!-- Helper functions of "TOP 10 (Most)" Lists -->
        <script type="module">
            // ## TOP 10 Update Most List Function
            function updateMostViewedPages(data) {
                // Function to fill in Missing Data
                data = fillMissingData(data);

                // A variable to hold the total
                let percentPageViewCount = 0;
                let percentVisitorCount = 0;

                // Calculate the sum outside the loop
                const totalMostViewedCount = data.reduce(function(total, item) {
                    return total + item.page_view_count;
                }, 0);

                const totalMostVisitorCount = data.reduce(function(total, item) {
                    return total + item.visitor_count;
                }, 0);

                // Process data with JavaScript loop
                data.forEach(function(item, k) {
                    // Prepare values for Progress Animation and Progress Bar
                    let pageTitle = item.page_title;
                    let query = item.query;
                    let pageViewCount = item.page_view_count;
                    let visitorCount = item.visitor_count;

                    // Progress Animation Count
                    counterAnimation(pageViewCount, '#topTenViewBarCount' + k);
                    counterAnimation(visitorCount, '#topTenVisitorBarCount' + k);

                    // Percentage Calculation
                    percentPageViewCount = totalMostViewedCount > 0 ? (pageViewCount / totalMostViewedCount) * 100 : 0;
                    percentVisitorCount = totalMostVisitorCount > 0 ? (visitorCount / totalMostVisitorCount) * 100 : 0;

                    // Progress Animation Count Percent
                    counterAnimation(percentPageViewCount, '#topTenViewBarCountPercent' + k);
                    counterAnimation(percentVisitorCount, '#topTenVisitorBarCountPercent' + k);

                    // Progress Animation Count Percent
                    counterAnimationBar(percentPageViewCount, '#topTenViewProgress' + k);
                    counterAnimationBar(percentVisitorCount, '#topTenVisitorProgress' + k);

                    // Text Toggle Animation
                    typeSentence(pageTitle, '#topTenText' + k, 2);

                    // Text Tooltip Title
                    titlechange(pageTitle, '#topTenTextDiv' + k);

                    // URL Changer
                    urlchange('#topTenQuery' + k, '#topTenQueryIcon' + k, query);

                    // Hide if not viewed
                    $('#topTenDiv' + k).css('visibility', pageViewCount !== 0 ? 'visible' : 'hidden');
                });

            }
            window["updateMostViewedPages"] = updateMostViewedPages;

            // ### Complete 10 items when empty data
            function fillMissingData(data) {
                // Check the data list and create an array if undefined
                if (!Array.isArray(data)) {
                    data = [];
                }

                const emptyItemsCount = 10 - data.length;
                for (let i = 0; i < emptyItemsCount; i++) {
                    data.push({
                        page_title: "",
                        query: "",
                        page_view_count: 0,
                        visitor_count: 0
                    });
                }

                return data;
            }
            window["fillMissingData"] = fillMissingData;

            // ## Top 10 List #Best Pageview and Visitor Cards Update
            function updateBestPageviewAndVisitorCards(data) {
                // since the first data is the best number, update the card with it
                let firstItem = data[0] || { page_view_count: 0, visitor_count: 0 };
                counterAnimation(firstItem.page_view_count, '#pageviewbarcounter'); // top div card
                counterAnimation(firstItem.visitor_count, '#visitorratiobarcounter'); // top div card
            }
            window["updateBestPageviewAndVisitorCards"] = updateBestPageviewAndVisitorCards;
        </script>

        <!-- Helper functions of "Referrer" Lists -->
        <script type="module">
            // ## Referrer List Update Function
            function updateReferrerList(data) {
                // Calculate total the sum outside the loop
                const totalYearlyReferrers = data.reduce((total, referrer) => total + referrer.count, 0);

                // Process data with JavaScript loop
                data.forEach((referrer, index) => {
                    // Prepare values for Progress Animation and Progress Bar
                    let referrerType = referrer.referrer_type;
                    let referrerCount = referrer.count;

                    // Percentage Calculation
                    const referrerPercent = totalYearlyReferrers > 0 ? Math.round((referrerCount / totalYearlyReferrers) * 100) : 0;

                    // Progress Animation Count Percent
                    counterAnimationBar(referrerPercent, `#progressbar${index}`);
                    counterAnimation(referrerCount, `#progressbarcount${index}`);
                    counterAnimation(referrerPercent, `#progressbarcountPercent${index}`);

                    // Referrer Text and Icon Toggle Animation
                    typeReferrerToggleIcon(referrerType, `#referrericon${index}`);
                    typeSentenceForReferrer(referrerType, `#referrertitle${index}`, 10);
                });
            }
            window["updateReferrerList"] = updateReferrerList;

            function updateBestReferrerCard(data) {
                // Find the highest count value
                var maxCount = Math.max.apply(Math, data.map(function(item) {
                    return item.count;
                }));

                // Find the index of the array with the highest count value
                var maxIndex = data.findIndex(function(item) {
                    return item.count === maxCount;
                });

                // Get the referrer_type of the array with the highest count value
                var referrerType = data[maxIndex].referrer_type;

                // Update the card with it
                counterAnimation(maxCount, '#referrerbarcounter');
                typeSentenceForReferrer(referrerType, "#referrertext", 10);
            }
            window["updateBestReferrerCard"] = updateBestReferrerCard;
        </script>

        <!-- Counter Animation.smartek.added.02072021 -->
        <script type="module">
            $('.text-value-lg').each(function () {
                $(this).prop('Counter', ($(this).text() < 10) ? 0 : ($(this).text() - 9)).animate({
                    Counter: $(this).text()
                }, {
                    duration: 400,
                    easing: 'swing',
                    step: function (now) {
                        $(this).text(Math.ceil(now));
                    }
                });
            });

            function counterAnimation(bsayi,card) {
                $({ Counter: (bsayi < 10) ? 0 : (bsayi - 9) }).animate({
                    Counter: bsayi
                }, {
                    duration: 500,
                    easing: 'swing',
                    step: function() {
                        $(card).text(Math.ceil(this.Counter));
                    }
                });
            }
            window["counterAnimation"] = counterAnimation;

            function counterAnimationBar(bsayi,bar) {
                $({ Counter: (bsayi < 10) ? 0 : (bsayi - 9) }).animate({
                    Counter: bsayi
                }, {
                    duration: 500,
                    easing: 'swing',
                    step: function() {
                        $(bar).width( Math.ceil(this.Counter) + '%' );
                    }
                });
            }
            window["counterAnimationBar"] = counterAnimationBar;

            // Text animation - Typing Effect
            async function typeSentence(sentence, eleRef, delay = 100) {
                $(eleRef).text('');
                const letters = sentence.split("");
                let i = 0;
                while(i < letters.length) {
                    await waitForMs(delay);
                    $(eleRef).append(letters[i]);
                    i++
                }
            }
            window["typeSentence"] = typeSentence;

            // Change tooltip title for toptextdiv
            async function titlechange(sentence, eleRef, delay = 100) {
                $(eleRef).attr('title', sentence);
                $(eleRef).attr('data-original-title', sentence);
            }
            window["titlechange"] = titlechange;

            // Change device icon due to sort
            async function typeDeviceToggleIcon(device, eleRef) {
                if (device === 'Mobil') {
                    $(eleRef).attr('class', 'cui-screen-smartphone');
                }else {
                    $(eleRef).attr('class', 'cui-screen-desktop');
                }
            }
            window["typeDeviceToggleIcon"] = typeDeviceToggleIcon;

            function waitForMs(ms) {
                return new Promise(resolve => setTimeout(resolve, ms))
            }
            window["waitForMs"] = waitForMs

            // Change href url
            async function urlchange(eleRef,eleRef2,url) {
                $(eleRef).prop("href", url);
                $(eleRef2).prop("href", url);
            }
            window["urlchange"] = urlchange;

            // Text animation - Typing Effect
            async function typeSentenceForReferrer(sentence, eleRef, delay = 100) {
                switch (sentence) {
                    case 'google':
                        sentence = 'Google';
                        break;
                    case 'instagram':
                        sentence = 'Instagram';
                        break;
                    case 'facebook':
                        sentence = 'Facebook';
                        break;
                    case 'twitter':
                        sentence = 'Twitter';
                        break;
                    case 'linkedin':
                        sentence = 'LinkedIn';
                        break;
                    default:
                        sentence = sentence.charAt(0).toUpperCase() + sentence.slice(1);
                }

                $(eleRef).text('');
                const letters = sentence.split("");
                let i = 0;
                while(i < letters.length) {
                    await waitForMs(delay);
                    $(eleRef).append(letters[i]);
                    i++
                }
            }
            window["typeSentenceForReferrer"] = typeSentenceForReferrer;

            // Change device icon due to sort
            async function typeReferrerToggleIcon(referrer, eleRef) {
                switch(referrer) {
                    case 'google':
                        $(eleRef).attr('class', 'fa fa-google fa-lg'); // -> class changed
                        break;
                    case 'instagram':
                        $(eleRef).attr('class', 'fa fa-instagram fa-lg'); // -> class changed
                        break;
                    case 'facebook':
                        $(eleRef).attr('class', 'fa fa-facebook fa-lg'); // -> class changed
                        break;
                    case 'twitter':
                        $(eleRef).attr('class', 'fa fa-twitter fa-lg'); // -> class changed
                        break;
                    case 'linkedin':
                        $(eleRef).attr('class', 'fa fa-linkedin fa-lg'); // -> class changed
                        break;
                    default:
                        $(eleRef).attr('class', 'fa fa-star fa-lg'); // -> class changed
                }
            }
            window["typeReferrerToggleIcon"] = typeReferrerToggleIcon;

            // Change bouncerateicon and color for arrow direction & Text color - Total count pageviews bar
            async function typeBounceRateToggleColorIcon(referrer, eleRef, colorRef) {
                if(referrer > 0) {
                    $(eleRef).attr('class', 'fa fa-caret-up');
                    $(colorRef).attr('class', 'text-success');
                }
                else if(referrer < 0){
                    $(eleRef).attr('class', 'fa fa-caret-down');
                    $(colorRef).attr('class', 'text-danger');
                } else {
                    $(eleRef).attr('class', 'fa fa-minus');
                    $(colorRef).attr('class', 'text-warning');
                }
            }
            window["typeBounceRateToggleColorIcon"] = typeBounceRateToggleColorIcon;

            // Change total count pageviews bar
            async function typeBounceRateBarsToggle(referrerPageviews, referrerVisitors, viewbarRef, visitbarRef) {
                // for Pageviews
                if(referrerPageviews >= 0) {
                    $(viewbarRef).attr('class', 'progress-bar bg-success');
                }
                else if(referrerPageviews < 0){
                    $(viewbarRef).attr('class', 'progress-bar bg-warning ml-auto');
                }

                // for Visitors
                if(referrerVisitors >= 0) {
                    $(visitbarRef).attr('class', 'progress-bar bg-info');
                }
                else if(referrerVisitors < 0){
                    $(visitbarRef).attr('class', 'progress-bar bg-primary ml-auto');
                }
            }
            window["typeBounceRateBarsToggle"] = typeBounceRateBarsToggle;
        </script>

        <!-- Screenshot Function -->
        <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
        <script type="module">
            // html2canvas <- https://html2canvas.hertzen.com/dist/html2canvas.min.js
            // code reference: https://stackoverflow.com/questions/31656689/how-to-save-img-to-users-local-computer-using-html2canvas
            setUpDownloadPageAsImage();

            function setUpDownloadPageAsImage() {
                document.getElementById("btnSave2").addEventListener("click", function() {
                    html2canvas(document.querySelector('#allCard')).then(function(canvas) {
                        console.log(canvas);
                        simulateDownloadImageClick(canvas.toDataURL(), 'Total_Traffic_Data_Analytics_Chart_{{ \Carbon\Carbon::now() }}.png');
                    });
                });

                document.getElementById("btnSave3").addEventListener("click", function() {
                    html2canvas(document.querySelector('#allCard2')).then(function(canvas) {
                        console.log(canvas);
                        simulateDownloadImageClick(canvas.toDataURL(), 'Visitor_Analytics_and_Records_{{ \Carbon\Carbon::now() }}.png');
                    });
                });
            }

            function simulateDownloadImageClick(uri, filename) {
                var link = document.createElement('a');
                if (typeof link.download !== 'string') {
                    window.open(uri);
                } else {
                    link.href = uri;
                    link.download = filename;
                    accountForFirefox(clickLink, link);
                }
            }

            function clickLink(link) {
                link.click();
            }

            // Wrapper function
            function accountForFirefox(click) {
                let link = arguments[1];
                document.body.appendChild(link);
                click(link);
                document.body.removeChild(link);
            }
        </script>

        <!-- Tooltip Starter Function -->
        <script type="module">
            $(function () {
                $('[data-toggle="tooltip"]').tooltip()
            })
        </script>
    @endcanany

@endsection

@section('body')

    @can('admin.dashboard.segmented-data')
    <div class="row">
        <div class="col-sm-6 col-lg-3">
            <div data-toggle="tooltip" tabindex="0" data-placement="top" title="{{ trans('admin.dashboard.number_of_content') }}" class="card overflow-hidden">
                <div class="card-body p-0 d-flex align-items-center">
                    <div class="bg-primary p-4 mfe-3">
                        <i class="cui-briefcase font-2xl"></i>
                    </div>
                    <div>
                        <div class="text-value text-primary font-3xl">{{ $pageContentItemModelsCounts['corporates'] }}</div>
                        <div class="text-muted text-uppercase font-weight-bold small">{{ trans('admin.corporate.title') }}</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-6 col-lg-3">
            <div data-toggle="tooltip" tabindex="0" data-placement="top" title="{{ trans('admin.dashboard.number_of_content') }}" class="card overflow-hidden">
                <div class="card-body p-0 d-flex align-items-center">
                    <div class="bg-info p-4 mfe-3">
                        <i class="icon-organization font-2xl"></i>
                    </div>
                    <div>
                        <div class="text-value text-info font-3xl">{{ $pageContentItemModelsCounts['services'] }}</div>
                        <div class="text-muted text-uppercase font-weight-bold small">{{ trans('admin.service.title') }}</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-6 col-lg-3">
            <div data-toggle="tooltip" tabindex="0" data-placement="top" title="{{ trans('admin.dashboard.number_of_content') }}" class="card overflow-hidden">
                <div class="card-body p-0 d-flex align-items-center">
                    <div class="bg-warning p-4 mfe-3">
                        <i class="icon-diamond font-2xl"></i>
                    </div>
                    <div>
                        <div class="text-value text-warning font-3xl">{{ $pageContentItemModelsCounts['projects'] }}</div>
                        <div class="text-muted text-uppercase font-weight-bold small">{{ trans('admin.project.title') }}</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-6 col-lg-3">
            <div data-toggle="tooltip" tabindex="0" data-placement="top" title="{{ trans('admin.dashboard.number_of_content') }}" class="card overflow-hidden">
                <div class="card-body p-0 d-flex align-items-center">
                    <div class="bg-danger p-4 mfe-3">
                        <i class="icon-docs font-2xl"></i>
                    </div>
                    <div>
                        <div class="text-value text-danger font-3xl">{{ $pageContentItemModelsCounts['dynamicPages'] }}</div>
                        <div class="text-muted text-uppercase font-weight-bold small">{{ trans('admin.dynamic-page.title') }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /.row-->
    <div class="row">
        <div class="col-sm-6 col-lg-3">
            <div class="card text-white bg-primary">
                <div class="card-body bg-primary pb-0 d-flex justify-content-between align-items-start">
                    <div>
                        <div class="text-value-lg" id="card1">0</div>
                        <div>{{ trans('admin.dashboard.page_views') }}</div>
                    </div>
                    <div class="btn-group">
                        <button class="btn btn-transparent dropdown-toggle p-0" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="icon-settings"></i>
                        </button>
                            <div class="dropdown-menu dropdown-menu-right" id="analyticsButtonGroup1">
                                <button class="dropdown-item analyticsButton active" onClick="updateChart11()" href="#">{{ trans('admin.dashboard.daily_24_hour') }}</button>
                                <button class="dropdown-item analyticsButton" onClick="updateChart12()" href="#">{{ trans('admin.dashboard.weekly_7_day') }}</button>
                            </div>
                    </div>

                </div>
                <div class="c-chart-wrapper mt-3 mx-3" style="height:70px;">
                    <canvas class="chart" id="card-chart1" height="70"></canvas>
                </div>
            </div>
        </div>
        <!-- /.col-->
        <div class="col-sm-6 col-lg-3">
            <div class="card text-white bg-info">
                <div class="card-body bg-info pb-0 d-flex justify-content-between align-items-start">
                    <div>
                        <div class="text-value-lg" id="card2">0</div>
                        <div>{{ trans('admin.dashboard.page_views') }}</div>
                    </div>
                    <div class="btn-group">
                        <button class="btn btn-transparent dropdown-toggle p-0" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="icon-settings"></i>
                        </button>
                        <div class="dropdown-menu dropdown-menu-right" id="analyticsButtonGroup2">
                            <button class="dropdown-item analyticsButton active" onClick="updateChart21()" href="#">{{ trans('admin.dashboard.daily_24_hour') }}</button>
                            <button class="dropdown-item analyticsButton" onClick="updateChart22()" href="#">{{ trans('admin.dashboard.weekly_7_day') }}</button>
                        </div>
                    </div>
                </div>
                <div class="c-chart-wrapper mt-3 mx-3" style="height:70px;">
                    <canvas class="chart" id="card-chart2" height="70"></canvas>
                </div>
            </div>
        </div>
        <!-- /.col-->
        <div class="col-sm-6 col-lg-3">
            <div class="card text-white bg-warning">
                <div class="card-body bg-warning pb-0 d-flex justify-content-between align-items-start">
                    <div>
                        <div class="text-value-lg" id="card3">0</div>
                        <div>{{ trans('admin.dashboard.page_views') }}</div>
                    </div>
                    <div class="btn-group">
                        <button class="btn btn-transparent dropdown-toggle p-0" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="icon-settings"></i>
                        </button>
                        <div class="dropdown-menu dropdown-menu-right" id="analyticsButtonGroup3">
                            <button class="dropdown-item analyticsButton active" onClick="updateChart31()" href="#">{{ trans('admin.dashboard.daily_24_hour') }}</button>
                            <button class="dropdown-item analyticsButton" onClick="updateChart32()" href="#">{{ trans('admin.dashboard.weekly_7_day') }}</button>
{{--                            <a class="dropdown-item" href="#">Something else here</a>--}}
                        </div>
                    </div>
                </div>
                <div class="c-chart-wrapper mt-3" style="height:70px;">
                    <canvas class="chart" id="card-chart3" height="70"></canvas>
                </div>
            </div>
        </div>
        <!-- /.col-->
        <div class="col-sm-6 col-lg-3">
            <div class="card text-white bg-danger">
                <div class="card-body bg-danger pb-0 d-flex justify-content-between align-items-start">
                    <div>
                        <div class="text-value-lg" id="card4">0</div>
                        <div>{{ trans('admin.dashboard.page_views') }}</div>
                    </div>
                    <div class="btn-group">
                        <button class="btn btn-transparent dropdown-toggle p-0" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="icon-settings"></i>
                        </button>
                        <div class="dropdown-menu dropdown-menu-right" id="analyticsButtonGroup4">
                            <button class="dropdown-item analyticsButton active" onClick="updateChart41()" href="#">{{ trans('admin.dashboard.daily_24_hour') }}</button>
                            <button class="dropdown-item analyticsButton" onClick="updateChart42()" href="#">{{ trans('admin.dashboard.weekly_7_day') }}</button>
                        </div>
                    </div>
                </div>
                <div class="c-chart-wrapper mt-3 mx-3" style="height:70px;">
                    <canvas class="chart" id="card-chart4" height="70"></canvas>
                </div>
            </div>
        </div>
        <!-- /.col-->
    </div>
    <!-- /.row-->
    @endcan

    @can('admin.dashboard.total-site-traffic')
    <div id="allCard" class="card">
        <div class="card-body">
            <div class="d-flex justify-content-between">
                <div>
                    <h4 class="card-title mb-0">{{ trans('admin.dashboard.website_traffic') }}</h4>
{{--                    <div class="small text-muted">September 2019</div>--}}
                    <div class="small text-muted">{{ trans('admin.dashboard.total_traffic_data') }}</div>
                </div>
                <div class="btn-toolbar d-none d-sm-block" role="toolbar" aria-label="Toolbar with buttons">
                    <div class="btn-group btn-group-toggle mx-3" data-toggle="buttons">
                        <label class="btn btn-outline-secondary active">
                            <input id="optionDay" type="radio" name="options" autocomplete="off" checked=""> {{ trans('admin.dashboard.period.day') }}
                        </label>
                        <label class="btn btn-outline-secondary">
                            <input id="optionWeek" type="radio" name="options" autocomplete="off"> {{ trans('admin.dashboard.period.week') }}
                        </label>
                        <label class="btn btn-outline-secondary">
                            <input id="optionMonth" type="radio" name="options" autocomplete="off"> {{ trans('admin.dashboard.period.month') }}
                        </label>
                        <label class="btn btn-outline-secondary">
                            <input id="optionYear" type="radio" name="options" autocomplete="off"> {{ trans('admin.dashboard.period.year') }}
                        </label>
                    </div>
                    <button data-toggle="tooltip" tabindex="0" data-placement="top" title="{{ trans('admin.dashboard.take_screenshot') }}" id="btnSave2" class="btn btn-primary" type="button">
                        <i class="fa fa-download"></i>
                    </button>
                </div>

                <div class="col-auto d-flex align-items-center d-sm-none my-1">
                    <select onchange="$('#'+this.value).click()" class="custom-select mr-sm-2 mr-3" id="inlineFormCustomSelect">
                        <option value="optionDay" selected>{{ trans('admin.dashboard.period.day') }}</option>
                        <option value="optionWeek">{{ trans('admin.dashboard.period.week') }}</option>
                        <option value="optionMonth">{{ trans('admin.dashboard.period.month') }}</option>
                        <option value="optionYear">{{ trans('admin.dashboard.period.year') }}</option>
                    </select>
                    <button data-toggle="tooltip" tabindex="0" data-placement="top" title="{{ trans('admin.dashboard.take_screenshot') }}" onclick="$('#btnSave2').click()" class="btn btn-primary" type="button">
                        <i class="fa fa-download"></i>
                    </button>
                </div>

            </div>

            <div class="c-chart-wrapper" style="height:300px;margin-top:40px;">
                <canvas class="chart" id="main-chart" height="300"></canvas>
            </div>
        </div>
        <div class="card-footer">
            <div class="row text-center">
                <div class="col-sm-12 col-md mb-sm-2 mb-0 mx-2 pt-1 pt-sm-0">
                    <div class="text-muted">{{ trans('admin.dashboard.page_views') }}</div>
                    <strong>
                        <div id="totalcountpageviews">NaN</div>
                        {{ trans('admin.dashboard.views') }} ( <span data-toggle="tooltip" tabindex="0" data-placement="bottom" title="{{ trans('admin.dashboard.previous_period_info') }}" id="bounceratepageviewscolor" class="text-success">
                            <span id="bounceratepageviews">NaN</span>% <i id="bounceratepageviewsicon" class="fa fa-caret-up"></i></span> )
                    </strong>
                    <div data-toggle="tooltip" tabindex="0" data-placement="bottom" title="{{ trans('admin.dashboard.previous_period_info') }}" class="progress progress-xs mt-2">
                        <div id="totalcountpageviewsbar" class="progress-bar bg-success" role="progressbar" style="width: 0%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="col-sm-12 col-md mb-sm-2 mb-0 mx-2 pt-3 pt-sm-0">
                    <div class="text-muted">{{ trans('admin.dashboard.visits') }}</div>
                    <strong>
                        <div id="totalcountvisitors">NaN</div>
                        {{ trans('admin.dashboard.visitors') }} ( <span data-toggle="tooltip" tabindex="0" data-placement="bottom" title="{{ trans('admin.dashboard.previous_period_info') }}" id="bounceratevisitorscolor" class="text-success">
                            <span id="bounceratevisitors">NaN</span>% <i id="bounceratevisitorsicon" class="fa fa-caret-up"></i></span> )
                    </strong>
                    <div data-toggle="tooltip" tabindex="0" data-placement="bottom" title="{{ trans('admin.dashboard.previous_period_info') }}" class="progress progress-xs mt-2">
                        <div id="totalcountvisitorsbar" class="progress-bar bg-info" role="progressbar" style="width: 0%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="col-sm-12 col-md mb-sm-2 mb-0 shadow rounded p-2 mx-0 mx-sm-2 mt-3 mt-sm-0">
                    <div class="text-muted font-xs">{{ trans('admin.dashboard.all_times') }}</div>
                    <strong>{{ $totalTrafficCounts['page_views'] }}</strong>
                    <strong class="font-xs d-block">{{ trans('admin.dashboard.views') }}</strong>
                </div>
                <div class="col-sm-12 col-md mb-sm-2 mb-0 shadow rounded p-2 mx-0 mx-sm-2 mt-2 mt-sm-0">
                    <div class="text-muted">{{ trans('admin.dashboard.all_times') }}</div>
                    <strong>{{ $totalTrafficCounts['visitors'] }}</strong>
                    <strong class="font-xs d-block">{{ trans('admin.dashboard.visitors') }}</strong>
                </div>
            </div>
        </div>
    </div>
    <!-- /.card-->
    @endcan

    @canany(['admin.dashboard.traffic-analytics', 'admin.dashboard.traffic-logs'])
    <div class="row">
        <div class="col-md-12">
            <div id="allCard2" class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between">
                        <div class="align-self-center">{{ trans('admin.dashboard.traffic_analysis_records') }}</div>

                        @can('admin.dashboard.traffic-analytics')
                        <div class="btn-toolbar d-none d-sm-block" role="toolbar" aria-label="Toolbar with buttons">
                            <div class="btn-group btn-group-toggle mx-3" data-toggle="buttons">
                                <label class="btn btn-outline-secondary active">
                                    <input id="optionBarDay" type="radio" name="options" autocomplete="off" checked=""> {{ trans('admin.dashboard.period.day') }}
                                </label>
                                <label class="btn btn-outline-secondary">
                                    <input id="optionBarWeek" type="radio" name="options" autocomplete="off"> {{ trans('admin.dashboard.period.week') }}
                                </label>
                                <label class="btn btn-outline-secondary">
                                    <input id="optionBarMonth" type="radio" name="options" autocomplete="off"> {{ trans('admin.dashboard.period.month') }}
                                </label>
                                <label class="btn btn-outline-secondary">
                                    <input id="optionBarYear" type="radio" name="options" autocomplete="off"> {{ trans('admin.dashboard.period.year') }}
                                </label>
                            </div>
                            <button data-toggle="tooltip" tabindex="0" data-placement="top" title="{{ trans('admin.dashboard.take_screenshot') }}" id="btnSave3" class="btn btn-primary" type="button">
                                <i class="fa fa-download"></i>
                            </button>
                        </div>
                        <div class="col-auto d-flex align-items-center d-sm-none my-1">
                            <select onchange="$('#'+this.value).click()" class="custom-select mr-sm-2 mr-3" id="inlineFormCustomSelect">
                                <option value="optionBarDay" selected>{{ trans('admin.dashboard.period.day') }}</option>
                                <option value="optionBarWeek">{{ trans('admin.dashboard.period.week') }}</option>
                                <option value="optionBarMonth">{{ trans('admin.dashboard.period.month') }}</option>
                                <option value="optionBarYear">{{ trans('admin.dashboard.period.year') }}</option>
                            </select>
                            <button data-toggle="tooltip" tabindex="0" data-placement="top" title="{{ trans('admin.dashboard.take_screenshot') }}" onclick="$('#btnSave3').click()" class="btn btn-primary" type="button">
                                <i class="fa fa-download"></i>
                            </button>
                        </div>
                        @endcan

                    </div>
                </div>

                <div class="card-body">

                    @can('admin.dashboard.traffic-analytics')
                    <div class="row border-bottom">
                        <div class="col-sm-6">
                            <div class="row">
                                <!-- card 1 -->
                                <div class="col-6">
                                    <div class="c-callout c-callout-info">
                                        <small id="pageviewtext" class="text-muted"><b>{{ trans('admin.dashboard.top_1') }}</b> {{ trans('admin.dashboard.page_views') }}</small>
                                        <div id="pageviewbarcounter" class="text-value-lg">{{ $topTenMostViewedPagesCounts['daily'][0]['page_view_count'] ?? '' }}</div>
                                    </div>
                                </div>
                                <!-- card 2 -->
                                <div class="col-6">
                                    <div class="c-callout c-callout-danger">
                                        <small id="visitorratiotext" class="text-muted"><b>{{ trans('admin.dashboard.top_1') }}</b> {{ trans('admin.dashboard.visitor_rate') }}</small>
                                        <div id="visitorratiobarcounter" class="text-value-lg">{{ $topTenMostViewedPagesCounts['daily'][0]['visitor_count'] ?? ''}}</div>
                                    </div>
                                </div>

                            </div>

                            <hr class="mt-0">

                            <!-- TOP 10 content -->
                            <most-viewed-pages-listing
                                    :data="{{ json_encode($topTenMostViewedPagesCounts['daily']) }}"
                                    :url="'{{ url('admin') }}'"
                                    inline-template
                            >
                                <div v-cloak>
                                     <div :id="'topTenDiv'+index" v-for="(item, index) in data" :key="index" class="progress-group align-items-center mb-4 most-viewed-pages">
                                        <div :id="'topTenTextDiv'+index" data-toggle="tooltip" tabindex="0" data-placement="top" :title="item.page_title" class="progress-group-prepend d-flex align-items-center col-6 p-0" style="flex: 0 0 50%">
                                            <a :id="'topTenQuery'+index" href="#" :href="item.query" class="text-truncate pr-3" target="_blank">
                                                <span :id="'topTenText'+index" class="progress-group-text">@{{ item.page_title }}</span>
                                            </a>
                                            <a :id="'topTenQueryIcon'+index" href="#" :href="item.query" class="fa fa-external-link ml-auto" style="margin-right: .5rem"></a>
                                        </div>
                                        <small class="progress-group-text mx-1 text-info font-weight-bold" style="flex: 0 0 15%">
                                            <div class="ml-auto float-left"><span :id="'topTenViewBarCount'+index">@{{ item.page_view_count }}</span>
                                                <div class="d-inline small">(<span :id="'topTenViewBarCountPercent'+index">@{{ item.percentPageViewCount.toFixed(1) }}</span>%)</div>
                                            </div>
                                        </small>
                                        <div class="progress-group-bars">
                                            <div class="progress progress-xs">
                                                <div :id="'topTenViewProgress'+index" class="progress-bar bg-info" role="progressbar" style="width: 0%" :style="{ width: item.percentPageViewCount + '%' }" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                            <div class="progress progress-xs">
                                                <div :id="'topTenVisitorProgress'+index" class="progress-bar bg-danger" role="progressbar" style="width: 0%" :style="{ width: item.percentVisitorCount + '%' }" aria-valuenow="32" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                        </div>
                                        <small class="progress-group-text mx-1 text-danger font-weight-bold" style="flex: 0 0 15%">
                                            <div class="ml-auto float-right"><span :id="'topTenVisitorBarCount'+index">@{{ item.visitor_count }}</span>
                                                <div class="d-inline small">(<span :id="'topTenVisitorBarCountPercent'+index">@{{ item.percentVisitorCount.toFixed(1) }}</span>%)</div>
                                            </div>
                                        </small>
                                    </div>
                                </div>
                            </most-viewed-pages-listing>
                            <!-- end TOP 10 content -->
                        </div>

                        <div class="col-sm-6">
                            <div class="row">
                                <div class="col-6">
                                    <div class="c-callout c-callout-warning">
                                        <small class="text-muted" id="devicetext0">{{ trans('admin.dashboard.desktop') }}</small>
                                        <div class="text-value-lg" id="devicebar">0</div>
                                    </div>
                                </div>

                                <div class="col-6">
                                    <div class="c-callout c-callout-success">
                                        <small class="text-muted" id="referrertext">NaN</small>
                                        <div class="text-value-lg" id="referrerbarcounter">0</div>
                                    </div>
                                </div>

                            </div>

                            <hr class="mt-0">

                            <!-- Visitor Counts Group by Device -->
                            <div class="mb-5">
                                @foreach(['desktop', 'mobile'] as $key => $device)
                                    <div class="progress-group">
                                        <div class="progress-group-header">
                                            <div class="c-icon progress-group-icon mb-1">
                                                <i class="cui-screen-" id="deviceBarIcon{{ $key }}"></i>
                                            </div>
                                            <div id="devicebartext{{ $key }}">{{ trans('admin.dashboard.'.$device) }}</div>
                                            <div class="row mfs-auto text-muted small mfe-2">(<div id="devicebarcountPercent{{ $key }}">0</div>%)</div>
                                            <div class="font-weight-bold" id="devicebarcount{{ $key }}">0</div>
                                        </div>
                                        <div class="progress-group-bars">
                                            <div class="progress progress-xs">
                                                <div class="progress-bar bg-warning" id="deviceProgress{{ $key }}" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            @foreach($referrerByTypeCounts['daily'] as $key => $referrer)
                                <div class="progress-group">
                                    <div class="progress-group-header align-items-end">
                                        <div class="c-icon progress-group-icon mb-1">
                                            <i id="referrericon{{ $key }}" class="fa fa-star fa-lg"></i>
                                        </div>
                                        <div id="referrertitle{{ $key }}">NaN</div>
                                        <div id="progressbarcount{{ $key }}" class="mfs-auto font-weight-bold mfe-2">0</div>
                                    </div>
                                    <div class="progress-group-bars">
                                        <div class="progress progress-xs">
                                            <div id="progressbar{{ $key }}" class="progress-bar bg-success" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <br>
                    @endcan

                    @can('admin.dashboard.traffic-logs')
                    <!--Traffic logs-->
                    <table class="table table-responsive-sm table-hover table-outline mb-0">
                        <thead class="thead-light">
                        <tr>
                            <th class="text-center">{{ trans('admin.dashboard.device') }}</th>
                            <th>{{ trans('admin.dashboard.user') }}</th>
                            <th class="text-center">{{ trans('admin.dashboard.country') }}</th>
                            <th>{{ trans('admin.dashboard.informations') }}</th>
                            <th class="text-center">{{ trans('admin.dashboard.browser') }}</th>
                            <th>{{ trans('admin.dashboard.activity') }}</th>
                        </tr>
                        </thead>
                        <tbody>
                        @php
                            function getMasked(string $maskItem) {
                                $parts = explode('.', $maskItem);
                                return $parts[0] .'.***.***.'. $parts[3];
                            }
                        @endphp
                        @foreach($latestAnalyticsVisitorsList as $visitor)
                        <tr>
                            <td class="text-center">
                                <div class="c-avatar">
                                    <i data-toggle="tooltip" tabindex="0" data-placement="right"
                                       title="{{ $visitor->is_mobile ? trans('admin.dashboard.mobile') : trans('admin.dashboard.desktop') }}"
                                       class="c-icon c-icon-xl cui-screen-{{ $visitor->is_mobile ? 'smartphone' : 'desktop' }}">
                                    </i>
                                </div>
                            </td>
                            <td>
                                <strong>{{ getMasked($visitor->ip) }}</strong>
                                <div class="small text-muted"><span>{{ \Carbon\Carbon::parse($visitor->time)->translatedFormat('h:i A') }}</span> | {{ \Carbon\Carbon::parse($visitor->date)->isoFormat('dddd, D MMM YYYY') }}</div>
                            </td>
                            <td class="text-center" style="color: {{ strtolower($visitor->country_code) ? "" : sprintf('#%06X', mt_rand(0, 0xFFFFFF)) }}">
                                <i class="c-icon c-icon-2xl cif-{{ strtolower($visitor->country_code) ? strtolower($visitor->country_code) : 'none icon-ghost' }}"></i>
                            </td>
                            <td>
                                <div class="clearfix">
                                    <div class="float-left"><strong>{{ $visitor->country_code.' - '.$visitor->country }}</strong></div>
                                    <div class="float-right"><small class="text-muted">{{ $visitor->city }}</small></div>
                                </div>
                                {{-- <div class="progress progress-xs">--}}
                                {{--    <div class="progress-bar bg-success" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>--}}
                                {{-- </div>--}}
                                <div class="float-left"><strong><small>{{ Illuminate\Support\Str::limit($visitor->region, 30) }}</small></strong></div>
                                <div class="float-right"><small>{{ Illuminate\Support\Str::limit($visitor->org, 35)  }}</small></div>
                            </td>
                            <td class="text-center">
                                <div class="c-icon c-icon-xl"><i class="fa fa-{{ $visitor->is_bot ? 'cog' : strtolower($visitor->browser) }}" aria-hidden="true"></i></div>
                                @if($visitor->is_bot)
                                    <strong>BOT</strong>
                                @endif
                                <div>{{ $visitor->browser }}</div>
                            </td>
                            <td>
                                <div class="small text-muted">{{ trans('admin.dashboard.visit_time') }}</div>
                                <strong>{{ \Carbon\Carbon::parse(strtotime("$visitor->time, $visitor->date"))->diffForHumans() }}</strong>
                            </td>
                        </tr>
                        @endforeach
                        </tbody>
                    </table>

                    <div class="card-block">
                        <div class="col-sm-auto col-12 float-right mb-2">
                            {{--    https://laravel.com/docs/8.x/pagination#adjusting-the-pagination-link-window    --}}
                            {!! optional($latestAnalyticsVisitorsList ?? '')->onEachSide(0)->links('admin.layout.paginate') !!}
                        </div>
                    </div>
                    @endcan

                </div>
            </div>
        </div>
    </div>
    @endcanany

    @can('admin.dashboard.inspiration')
    <div class="welcome-quote">
        <blockquote>
            {{ explode(" - ", $inspirationQuote)[0] }}
            <cite>
                {{ explode(" - ", $inspirationQuote)[1] }}
            </cite>
        </blockquote>
    </div>
    @endcan

    @canany(['admin.dashboard.segmented-data', 'admin.dashboard.total-site-traffic', 'admin.dashboard.traffic-analytics', 'admin.dashboard.traffic-logs', 'admin.dashboard.inspiration'])
    @else
        <div class="welcome-quote">
            <blockquote>
                This place looks pretty calm...
                <cite>
                    Admin
                </cite>
            </blockquote>
        </div>
    @endcanany

@endsection