@extends('admin.layouts.app')

@section('breadcrumb')

    @include('admin.common.breadcrumbs')

@endsection



@push('stylesheet-page-level')

<link href="//www.amcharts.com/lib/3/plugins/export/export.css" rel="stylesheet" type="text/css" />

<style>

        .col-md-6{

            padding: 15px 15px !important;

            background: #f5f5f5;

        }



    </style>

@endpush



@push('script-page-level')

<script>

    {{--var dailyVisitors = {!! $dailyVisitorChart !!}--}}

    {{--var countryWiseVisitors = {!! $countryWiseVisitors !!}--}}

</script>

<script src="{{asset('assets/admin/js/adv_datatables/csrf_token.js')}}" type="text/javascript"></script>

{{--<script src="{{asset('assets/admin/js/adv_datatables/users-dashboard.js')}}" type="text/javascript"></script>--}}

{{--<script src="{{asset('assets/admin/js/adv_datatables/cleaners-dashboard.js')}}" type="text/javascript"></script>--}}

{{--<script src="{{asset('assets/admin/js/adv_datatables/servants-dashboard.js')}}" type="text/javascript"></script>--}}

{{--<script src="{{asset('assets/admin/js/adv_datatables/pro-dashboard.js')}}" type="text/javascript"></script>--}}

<script src="{{asset('assets/admin/js/charts/amcharts/charts.js')}}" type="text/javascript"></script>

<script src="//www.amcharts.com/lib/3/amcharts.js" type="text/javascript"></script>

<script src="//www.amcharts.com/lib/3/serial.js" type="text/javascript"></script>

<script src="//www.amcharts.com/lib/3/radar.js" type="text/javascript"></script>

<script src="//www.amcharts.com/lib/3/pie.js" type="text/javascript"></script>

<script src="//www.amcharts.com/lib/3/plugins/tools/polarScatter/polarScatter.min.js" type="text/javascript"></script>

<script src="//www.amcharts.com/lib/3/plugins/animate/animate.min.js" type="text/javascript"></script>

<script src="//www.amcharts.com/lib/3/plugins/export/export.min.js" type="text/javascript"></script>

<script src="//www.amcharts.com/lib/3/themes/light.js" type="text/javascript"></script>

@endpush



@section('content')

        <!--begin:: Widgets/Stats-->

<div class="m-portlet ">
    <div class="welcome-note-admin">
                Welcome to My Cart E-Commerce Solution
    </div>
    <!-- <div class="m-portlet__body  m-portlet__body--no-padding">

        <div class="row m-row--no-padding m-row--col-separator-xl">

            <div class="col-md-6">

                <div id="operationg-systems"></div>

            </div>

            <div class="col-md-6">

                <div id="new-old"></div>

            </div>

            <div class="col-md-6">

                <div id="daily-sessions"></div>

            </div>

            <div class="col-md-6">

                <div id="container"></div>

            </div>

        </div>

    </div> -->

</div>

<!--end:: Widgets/Stats-->








@endsection



@section('custom_js')

    <script src="https://js.pusher.com/5.0/pusher.min.js"></script>

    <script>



        // Enable pusher logging - don't include this in production

        Pusher.logToConsole = true;



        var pusher = new Pusher('myKey', {

            auth: {

                    headers: {

                      'X-CSRF-Token': '{{ csrf_token() }}',

                       'auth': 'admin',

                      {{--'Authorization': 'Bearer '+'{{$adminData['token']}}'--}}

                    }

                  },

            wsHost: window.location.hostname,

            wsPort: 6001,

            authEndpoint: '/en/broadcasting/auth',

        });



        var channel = pusher.subscribe('private-my-channel-'+{{$adminData['id']}});

        channel.bind('pusher:subscription_succeeded', function(members) {

           console.log('Connected');

        });

        channel.bind('newNotificationEvent', function(data) {

          alert(JSON.stringify(data));

        });

    </script>

    <script>

    // OPERATIONG SYSTEMS GRAPGH //

        Highcharts.chart('operationg-systems', {

            chart: {

                type: 'column'

            },

            title: {

                text: 'Operating Systems'

            },

            accessibility: {

                announceNewData: {

                    enabled: true

                }

            },

            xAxis: {

                type: 'category'

            },

            legend: {

                enabled: false

            },

            plotOptions: {

                series: {

                    borderWidth: 0,

                    dataLabels: {

                        enabled: true,

                    }

                }

            },



            tooltip: {

                headerFormat: '<span style="font-size:11px">{series.name}</span><br>',

                pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}<br/>'

            },



            series: [

                {

                    name: "Operating System",

                    colorByPoint: true,

                    data: {!! $operatingSystem !!}

                }

            ],

        });

    </script>



    <script>

        //  NEW AND OLD USERS //

        Highcharts.chart('new-old', {

            chart: {

                plotBackgroundColor: null,

                plotBorderWidth: null,

                plotShadow: false,

                type: 'pie'

            },

            title: {

                text: 'New & Old Users'

            },

            tooltip: {

                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'

            },

            accessibility: {

                point: {

                    valueSuffix: '%'

                }

            },

            plotOptions: {

                pie: {

                    allowPointSelect: true,

                    cursor: 'pointer',

                    dataLabels: {

                        enabled: false

                    },

                    showInLegend: true

                }

            },

            series: [{

                name: 'Users',

                colorByPoint: true,

                data: {!! $newOld !!}

            }]

        });



    </script>



    <script>

    Highcharts.chart('daily-sessions', {

        chart: {

            type: 'line'

        },

        title: {

            text: 'Daily Users Session'

        },

        xAxis: {

            categories: {!! $dailySessionDates !!}

        },

        plotOptions: {

            line: {

                dataLabels: {

                    enabled: true

                },

                enableMouseTracking: false

            }

        },

        series: [{

            name: 'Users',

            data: {!! $dailySessionUsers !!}

        }]

    });



    </script>

@endsection