@extends(getTemplate('admin'))
@section('content')
    @push('custom-css')

    @endpush
    <div class="gadmin-pagesidebar-width-1 gadmin-mhide">
        <div class="panel panel-default gadmin-pagesidebar-width-1-panel ">
            <!-- begin panel-heading -->
            <div class="panel-heading gadmin-pagesidebar-width-1-heading">
                <h4 class="panel-title">{{__('admin.frontend')}}</h4>
            </div>
            <!-- end panel-heading -->
            <div class="gadmin-pagesidebar-body">
                <div class="gadmin-pagesidebar-main">
                    <ul class="nav gadmin-pagesidebar-ul">
                        <li><a href="{{url('admin/pages/show')}}" class="">{{__('core.page_list')}}</a></li>
                        <li><a href="{{url('admin/settings/seo')}}" class="">{{__('core.seo_settings')}}</a></li>
                        <li><a class=" active">{{__('core.website_analytics')}}</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="gadmin-pagesidebar-width-2">
        <!-- begin panel -->
        <div id="info-alert" class="alert display-none">
            <span class="close"  onclick="$('#info-alert').fadeOut()">×</span>
            <div class="alert-container"></div>
        </div>
        <div class="">
            <div class="row">
                <div class="col-md-6">
                    <!-- begin panel -->
                    <div class="panel panel-inverse" data-sortable-id="index-1">
                        <div class="panel-heading">
                            <div class="panel-heading-btn">
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i class="fa fa-redo"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
                            </div>
                            <h4 class="panel-title">{{__('admin.visitors_user_agent')}}</h4>
                        </div>
                        <div class="panel-body">
                            @if (count($userAgents))
                                <div id="user-agents" class="height-sm"></div>
                            @else
                                <h4 class="text-center"><i class="fa fa-info-circle"></i> {{__('admin.no_stats_available')}}</h4>
                            @endif
                        </div>
                    </div>
                    <!-- end panel -->
                </div>
                <div class="col-md-6">
                    <!-- begin panel -->
                    <div class="panel panel-inverse" data-sortable-id="index-2">
                        <div class="panel-heading">
                            <div class="panel-heading-btn">
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i class="fa fa-redo"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
                            </div>
                            <h4 class="panel-title">{{__('admin.visitors_platform')}}</h4>
                        </div>
                        <div class="panel-body">
                            @if (count($platforms))
                                <div id="user-platforms" class="height-sm"></div>
                            @else
                                <h4 class="text-center"><i class="fa fa-info-circle"></i> {{__('admin.no_stats_available')}}</h4>
                            @endif
                        </div>
                    </div>
                    <!-- end panel -->
                </div>
                <div class="col-md-6">
                    <!-- begin panel -->
                    <div class="panel panel-inverse" data-sortable-id="index-3">
                        <div class="panel-heading">
                            <div class="panel-heading-btn">
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i class="fa fa-redo"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
                            </div>
                            <h4 class="panel-title">{{__('admin.visitors_device')}}</h4>
                        </div>
                        <div class="panel-body">
                            @if (count($devices))
                                <div id="user-devices" class="height-sm"></div>
                            @else
                                <h4 class="text-center"><i class="fa fa-info-circle"></i> {{__('admin.no_stats_available')}}</h4>
                            @endif
                        </div>
                    </div>
                    <!-- end panel -->
                </div>
                <div class="col-md-6">
                    <!-- begin panel -->
                    <div class="panel panel-inverse" data-sortable-id="index-4">
                        <div class="panel-heading">
                            <div class="panel-heading-btn">
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i class="fa fa-redo"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
                            </div>
                            <h4 class="panel-title">{{__('admin.online_visitors')}}</h4>
                        </div>
                        <div class="panel-body">
                            <div class="text-center" style="padding:20px;margin-left:60px">
                                <img src="{{url('assets/core/images/placeholders/avatar.png')}}" class="img-responsive img-circle" width="150px" height="150px"/><br/>
                            </div>
                            <div id="site-visitors" class="text-center" style="font-size: 38px;"></div>
                        </div>
                    </div>
                    <!-- end panel -->
                </div>
            </div>
        </div>
    </div>
    <!-- </div> -->
    @push('custom-js')
        <script src="{{ url('assets/core/plugins/flot/jquery.flot.min.js') }}"></script>
        <script src="{{ url('assets/core/plugins/flot/jquery.flot.pie.min.js') }}"></script>
        <script>
            @php
                $colors = [
                    'blue' => '#348fe2',
                    'blueLight' => '#5da5e8',
                    'blueDark' => '#000099',
                    'aqua' => '#49b6d6',
                    'aquaLight' => '#6dc5de',
                    'aquaDark' => '#3a92ab',
                    'green' => '#00acac',
                    'greenLight' => '#33bdbd',
                    'greenDark' => '#008a8a',
                    'orange' => '#f59c1a',
                    'orangeLight0' => '#f7b048',
                    'orangeDark1' => '#c47d15',
                    'dark2' => '#2d353c',
                    'grey3' => '#b6c2c9',
                    'purple4' => '#727cb6',
                    'purpleLight5' => '#8e96c5',
                    'purpleDark6' => '#5b6392',
                    'red7' => '#ff5b57',
                ];

                function plotData($data, $colors): array {
                    $i = 0;

                    return array_map(
                        function ($platform) use (&$i, $colors): array {
                            return [
                                'label' => htmlspecialchars($platform['label']),
                                'data' => intval($platform['data']),
                                'color' => array_values($colors)[$i++] ?? $colors[array_rand($colors)],
                            ];
                        },
                        array_values($data)
                    );
                }
            @endphp

            var handleDonutChart = function () {
                var userAgentsData = {!! json_encode(plotData($userAgents, $colors)) !!};
                var platformsData = {!! json_encode(plotData($platforms, $colors)) !!};
                var devicesData = {!! json_encode(plotData($devices, $colors)) !!};

                var plotOptions = {
                    series: {
                        pie: {
                            innerRadius: 1.5,
                            show: true,
                            label: {
                                show: true
                            }
                        }
                    },
                    legend: {
                        show: true
                    }
                };

                $.plot('#user-agents', userAgentsData, plotOptions);
                $.plot('#user-platforms', platformsData, plotOptions);
                $.plot('#user-devices', devicesData, plotOptions);
            };
            $(document).ready(function () {

                $.get("{{ route('admin.siteVisitors') }}", function(data){
                    $('#site-visitors').html(data.visitors + (data.visitors === '1' ? ' User' : ' Users'));
                });

                var opts = {
                    angle: 0.15, // The span of the gauge arc
                    lineWidth: 0.44, // The line thickness
                    radiusScale: 0.8, // Relative radius
                    pointer: {
                        length: 0.6, // // Relative to gauge radius
                        strokeWidth: 0.035, // The thickness
                        color: '#000000' // Fill color
                    },
                    limitMax: false,     // If false, max value increases automatically if value > maxValue
                    limitMin: false,     // If true, the min value of the gauge will be fixed
                    colorStart: '#6FADCF',   // Colors
                    colorStop: '#8FC0DA',    // just experiment with them
                    strokeColor: '#E0E0E0',  // to see which ones work best for you
                    generateGradient: true,
                    highDpiSupport: true     // High resolution support
                };

                handleDonutChart();

                $('#preview-textfield').html(20 + '%');

                setInterval(function() {
                    $.get("{{ route('admin.siteVisitors') }}", function(data){
                        $('#site-visitors').html(data.visitors + (data.visitors === '1' ? ' User' : ' Users'));
                    });
                }, 2500);
            });

            handleDonutChart();
        </script>
        <!-- end panel -->
    @endpush
@endsection