@extends('layouts.app')
@section('title', 'Dashboard | Analytics')

@section('extrastyles')
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.2.0/css/all.css" >
{{--    <link href="{{ asset('/plugins/datepicker/datepicker3.css') }}" rel="stylesheet">--}}
    <link rel="stylesheet" type="text/css" href="{{ asset('/plugins/dateRangePicker2/daterangepicker.css') }}">
    <style>
        body {
            font-family: "Roboto", sans-serif;
            background: #e5e5e5;
        }
        a {
            color: #F24D29;
        }
        a:hover {
            color: #48c4a0;
        }
        .main-layout {
            padding: 20px;
            width: 100%;
        }
        .dash-notice {
            height: 60px;
            border: 1px solid #a4e2d0;
            justify-content: start;
            padding: 15px 30px;
            display: flex;
            background: #fff;
        }
        .notice {
            padding-left: 10px;
        }
        h5.notice-heading {
            font-size: 12px;
            font-weight: 500;
            color: #979797;
            text-transform: uppercase;
            margin-bottom: 0;
        }
        p.notice-description {
            font-size: 12px;
            color: #979797;
        }
        .welcome-widget-head {
            background: #48c4a0;
            height: 60px;
        }
        .welcome-widget-head h2 {
            font-size: 18px;
            color: #fff;
            padding-top: 20px;
            padding-left: 40px;
        }
        .welcome-widget-body {
            background: #fff;
            padding: 30px 0;
        }
        .extra-widget-heading {
            display: flex;
            justify-content: space-between;
        }
        .link-url {
            color: #8e8e8e;
            padding-left: 5px;
            font-size: 14px;
        }
        .link-url:hover {
            color: #48c4a0;
        }
        .getting-started-links {
            display: flex;
            padding-left: 15px;
        }

        table.alt-table {
            border: 1px solid #eaeaea;
            width: 100%;
            margin-top: 20px;
            table-layout: fixed;
        }
        .alt-table tr {
            border-bottom: 1px solid #eaeaea !important;
            height: 35px;
        }

        .alt-table tr:nth-child(odd) {
            background: #fafbfb;
        }
        .extra-widget-heading h3 {
            font-size: 22px !important;
            font-weight: 400;
        }
        .extra-widget-heading a {
            font-size: 14px;
            text-decoration: underline;
        }
        .profile-heading {
            height: 112px;
            text-align: center;
            background-color: #48c4a0;
            padding: 30px 0;
            color: #fff;
        }
        .profile-body {
            text-align: center;
            border: 1px solid #eaeaea;
            background: #fff;
            padding-bottom: 30px;
        }
        .profile-image {
            margin-top: -40px;
            margin-bottom: 20px;
        }
        p.contact-support {
            font-size: 18px;
        }
        p.phone-number {
            font-size: 14px;
        }
        p.email {
            font-size: 14px;
        }
        i {
            color: #48c4a0;
        }
        span.phone-icon {
            margin-right: 5px;
        }
        span.mail-icon {
            margin-right: 5px;
        }
        section {
            margin-bottom: 30px;
        }
        .extra-widget {
            background: #fff;
            padding: 30px 30px;
        }
        .extra-widget td {
            font-size: 14px;
            color: #8e8e8e;
        }
        .table-link {
            color: #48c4a0;
            padding-left: 5px;
            font-size: 14px;
        }
        .table-link:hover {
            text-decoration: underline;
        }
        .filters {
            display: flex;
        }
        .input-group.date {
            position: relative;
        }
        span.input-group-addon {
            position: absolute;
            right: 10px;
            font-size: 20px;
            top: 3px;
        }
        .date input.form-control {
            border: 1px solid #c9ced6;
            border-radius: 0;
            color: #c9ced6;
            width: 240px;
            font-size: 12px;
            height: 35px;
        }
        .to-text {
            padding: 5px 20px;
            font-size: 13px;
        }
        .btn-primary {
            color: #fff;
            background-color: #48c4a0;
            border-color: #48c4a0;
            border-radius: 0 !important;
            padding: 10px 30px;
        }
        .extra-widget-body {
            padding-top: 20px;
        }
        .graph-stats {
            text-align: center;
        }
        .graph-stats h4 {
            font-size: 22px;
            font-weight: 400;
            color: #48c4a0;
            margin-top: -30px;
            margin-bottom: 0;
        }
        .blued h4 {
            color: #4888c4;
        }
        .oranged h4 {
            color: #eab93c;
        }
        .graph-stats p {
            color: #8e8e8e;
            font-size: 14px;
        }
        .traffic-sources-widget .graph-stats {
            border-right: 1px solid #eaeaea;
        }
        .alt-table thead {
            background: linear-gradient(
                    90deg,
                    rgba(250, 250, 251, 1) 0%,
                    rgba(243, 243, 243, 1) 100%
            );
        }
        .alt-table th,
        .alt-table td {
            padding-left: 20px;
        }
        /* PAGINATIN */
        .pagination > .active > a,
        .pagination > .active > span,
        .pagination > .active > a:hover,
        .pagination > .active > span:hover,
        .pagination > .active > a:focus,
        .pagination > .active > span:focus {
            border-color: #dddddd;
            cursor: default;
            z-index: 2;
        }
        .pagination > li > a,
        .pagination > li > span {
            background-color: #ffffff;
            border: 1px solid #dddddd;
            color: inherit;
            float: left;
            line-height: 1.42857;
            margin-left: -1px;
            padding: 4px 10px;
            position: relative;
            text-decoration: none;
        }
        .page-item.active .page-link {
            background-color: #1ab394;
            border-color: #1ab394;
        }
        .page-link:focus {
            box-shadow: none;
        }
        .page-link:hover {
            color: #676a6c;
        }
        .pagination .footable-page.active a {
            background-color: #1ab394;
            border-color: #1ab394;
            color: white;
        }
        .pagi {
            margin-bottom: 30px;
            margin-top: 15px;
        }
        .pagination .footable-page.active a {
            background-color: #ecf9f5;
            border-color: #3dbca0;
            color: #000;
        }
        li.footable-page-arrow a {
            background-color: #3dbca0 !important;
            color: #fff;
        }
        #table_id_length {
            display: none;
        }
        #table_id_filter {
            display: none;
        }
        .dataTables_filter {
            display: flex;
            position: relative;
        }
        .dataTables_filter label {
            padding-top: 5px;
        }
        label {
            display: inline-block;
            margin-bottom: 0.5rem;
            color: #8e8e8e;
            font-size: 14px;
            padding-top: 5px;
        }
        th {
            color: #8e8e8e;
            font-size: 14px;
        }
        table.dataTable thead th {
            padding: 10px 18px;
            border-bottom: none;
        }
        table.dataTable,
        table.dataTable th,
        table.dataTable td {
            box-sizing: content-box;
            box-shadow: none;
        }
        .dataTables_wrapper .dataTables_length,
        .dataTables_wrapper .dataTables_filter,
        .dataTables_wrapper .dataTables_info,
        .dataTables_wrapper .dataTables_processing,
        .dataTables_wrapper .dataTables_paginate {
            color: #8e8e8e;
            font-size: 14px !important;
            margin-top: 20px;
        }
        .alt-table tr {
            border-bottom: 1px solid #eaeaea !important;
            height: 35px;
        }
        table.dataTable.no-footer {
            border-bottom: none !important;
        }
        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
            cursor: default;
            color: #fff !important;
            border: 1px solid transparent;
            background: transparent;
            box-shadow: none;
            background: #48c4a0;
        }
        a#table_id_next {
            background: #48c4a0;
            color: #fff !important;
        }
        .dataTables_wrapper .dataTables_paginate .paginate_button {
            box-sizing: border-box;
            display: inline-block;
            min-width: 1.5em;
            padding: 0.5em 1em;
            margin-left: 2px;
            text-align: center;
            text-decoration: none !important;
            cursor: pointer;
            border: 1px solid #c9ced6;
            border-radius: 2px;
            color: #8e8e8e !important;
        }
        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            color: #fff !important;
            border: 1px solid #c9ced6;
            background-color: 48c4a0;
            background: -webkit-gradient(
                    linear,
                    left top,
                    left bottom,
                    color-stop(0%, white),
                    color-stop(100%, #dcdcdc)
            );
            background: -webkit-linear-gradient(top, white 0%, #dcdcdc 100%);
            background: -moz-linear-gradient(top, white 0%, #dcdcdc 100%);
            background: -ms-linear-gradient(top, white 0%, #dcdcdc 100%);
            background: -o-linear-gradient(top, white 0%, #dcdcdc 100%);
            background: #edfaf6;
        }
        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            color: #fff !important;
            border: 1px solid #c9ced6;
            background-color: #48c4a0 !important;
            background: -webkit-gradient(
                    linear,
                    left top,
                    left bottom,
                    color-stop(0%, #585858),
                    color-stop(100%, #111)
            );
            background: -webkit-linear-gradient(top, #585858 0%, #111 100%);
            background: -moz-linear-gradient(top, #585858 0%, #111 100%);
            background: -ms-linear-gradient(top, #585858 0%, #111 100%);
            background: -o-linear-gradient(top, #585858 0%, #111 100%);
            background: linear-gradient(to bottom, #585858 0%, #111 100%);
        }
        table.dataTable thead th,
        table.dataTable thead td {
            padding: 10px 18px;
            border-bottom: none !important;
        }
        td.center {
            text-align: center;
        }
        span.search-icon {
            position: absolute;
            right: 48px;
            top: 7px;
        }
        .dataTables_filter label {
            padding-top: 8px;
            margin-right: 15px;
        }
        input#smart-search {
            height: 35px;
            border-radius: 0;
            margin-right: 40px;
        }
        select#length_change {
            height: 35px;
            width: 70px;
            border: 1px solid #c9ced6;
            padding-left: 8px;
            font-size: 14px;
            color: #c9ced6;
        }
        select#lenght_change:after {
            content: "\f0dc";
            font-family: FontAwesome;
            color: #48c4a0;
            padding: 12px 8px;
            position: absolute;
            right: 0;
            top: 0;
            background: red;
            z-index: 1;
            text-align: center;
            width: 10%;
            height: 100%;
            pointer-events: none;
            box-sizing: border-box;
        }
        .filters label {
            margin-right: 10px;
        }

        @media (max-width: 767px) {
            .filters {
                display: block;
            }
            .extra-widget-heading {
                display: block;
            }
        }
    </style>

@endsection

@section('content')
    @include('Website::analytics.analytics-dashboard')
    @include('Website::analytics._setting_popup')
@endsection

@section('footer')
    @if($viewer_id)
{{--    <script src="/assets/scripts/chartJs/Chart.min.js"></script>--}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
{{--    <script src="{{ asset('/plugins/datepicker/bootstrap-datepicker.js') }}"></script>--}}
        <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
        <script type="text/javascript" src="{{ asset('plugins/dateRangePicker2/daterangepicker.min.js') }}"></script>
{{--    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>--}}
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script>

        // google.charts.load('current', {'packages':['imagesparkline']});
        // google.charts.setOnLoadCallback(drawChart);
        function loadPageAnalytics() {
            getSiteAnalytics();
            getSiteTotal();
            getGeoTrafficResources();
            getContentOverview();
            drawChart();
        }

        function getContentOverview() {
            var startDate = $('#start_date').val();
            var endDate = $('#end_date').val();
            var isDashboard = $('.isDashBoard').val();
            $.ajax({
                method: 'POST',
                url: base_url+'/analytics/content-overview',
                data: 'page=main&start_date=' + startDate + '&end_date=' + endDate + '&_token={{ csrf_token() }}' + '&is_dashboard=' + isDashboard,
                dataType: 'json',
            }).done(function(response) {
                var html = ``;
                $.each(response.data, function (fieldName, contentPage) {
                    html += `<tr>
                            <td>
                                <div style="word-break: break-all">
                                    ${contentPage.page}
                                </div>
                            </td>
                            <td>${contentPage.page_views}</td>
                            <td>${contentPage.page_views_percent}%</td>
                    </tr>`;
                });
                $('#content_overview_table').find('tbody').html(html);
            });
        }

        function drawChart() {
            getAjaxSiteChartData('page_views_chart');
            getAjaxSiteChartData('bounce_rate_chart');
            getAjaxSiteChartData('visits_chart');
            getAjaxSiteChartData('site_time_chart');
        }
    </script>
    @endif
    @include('Website::analytics._analytics_script')
@endsection