@extends('companies.ecomtrading.layouts.app')
@section('page-wrapper')

    <!-- [ Main Content ] start -->

                    <!-- [ breadcrumb ] start -->

                    <!-- [ breadcrumb ] end -->
                    <div class="main-body">
                        <div class="page-wrapper">
                            <!-- [ Main Content ] start -->
                            <div class="row">
                                <!-- [ daily sales section ] start -->
                                {{--<div class="col-md-6 col-xl-4">--}}
                                    {{--<div class="card" style="opacity: 0.2">--}}
                                        {{--<div class="card-block">--}}
                                            {{--<h6 class="mb-4">USSD Airtime</h6>--}}
                                            {{--<div class="row d-flex align-items-center">--}}
                                                {{--<div class="col-9">--}}
                                                    {{--<h3 class="f-w-300 d-flex align-items-center m-b-0"><i class="feather icon-arrow-up text-c-green f-30 m-r-10"></i>Kshs. 6,000</h3>--}}
                                                {{--</div>--}}

                                                {{--<div class="col-3 text-right">--}}
                                                    {{--<p class="m-b-0">67%</p>--}}
                                                {{--</div>--}}
                                            {{--</div>--}}
                                            {{--<div class="progress m-t-30" style="height: 7px;">--}}
                                                {{--<div class="progress-bar progress-c-theme" role="progressbar" style="width: 67%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>--}}
                                            {{--</div>--}}
                                        {{--</div>--}}
                                    {{--</div>--}}
                                {{--</div>--}}
                                <!-- [ daily sales section ] end -->

                                <!-- [ Monthly  sales section ] start -->
                                {{--<div class="col-md-6 col-xl-4">--}}
                                    {{--<div class="card" style="opacity: 0.2">--}}
                                        {{--<div class="card-block">--}}
                                            {{--<h6 class="mb-4">SMS Airtime</h6>--}}
                                            {{--<div class="row d-flex align-items-center">--}}
                                                {{--<div class="col-9">--}}
                                                    {{--<h3 class="f-w-300 d-flex align-items-center  m-b-0"><i class="feather icon-arrow-down text-c-red f-30 m-r-10"></i>Kshs. 3,600</h3>--}}
                                                {{--</div>--}}
                                                {{--<div class="col-3 text-right">--}}
                                                    {{--<p class="m-b-0">36%</p>--}}
                                                {{--</div>--}}
                                            {{--</div>--}}
                                            {{--<div class="progress m-t-30" style="height: 7px;">--}}
                                                {{--<div class="progress-bar progress-c-theme2" role="progressbar" style="width: 35%;" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>--}}
                                            {{--</div>--}}
                                        {{--</div>--}}
                                    {{--</div>--}}
                                {{--</div>--}}
                                <!-- [ Monthly  sales section ] end -->

                                <!-- [ year  sales section ] start -->
                                <div class="col-md-12 col-xl-12">
                                    <div class="card">
                                        <div class="card-block">
                                            <h6 class="mb-4">Requested Messages</h6>
                                            <div class="row d-flex align-items-center">
                                                <div class="col-9">
                                                    <h3 class="f-w-300 d-flex align-items-center  m-b-0"><i class="{{ $iconLabel }} f-30 m-r-10"></i>{{ $requestedMessages->count() }} of {{ $messages->count() }}</h3>
                                                </div>
                                                <div class="col-3 text-right">
                                                    <p class="m-b-0">{{ $requestedMessagesPercentage }}%</p>
                                                </div>
                                            </div>
                                            <div class="progress m-t-30" style="height: 7px;">
                                                <div class="progress-bar progress-bar-striped progress-bar-animated progress-c-theme3" role="progressbar" style="width: {{ $requestedMessagesPercentage }}%;" aria-valuenow="{{ $requestedMessagesPercentage }}%" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ year  sales section ] end -->

                                <!-- [ worldLow section ] start -->
                                <div class="col-xl-8 col-md-6">
                                    <div class="card">
                                        <div class="card-header">
                                            <h5>Visitors by Country</h5>
                                        </div>
                                        <div class="card-block">
                                            <div id="world-low" style="height:450px;"></div>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ worldLow section ] end -->

                                <!-- [ statistics year chart ] start -->
                                <div class="col-xl-4 col-md-6">
                                    <div class="card bg-c-blue">
                                        <div class="card-header borderless">
                                            <h5 class="text-white">Visits</h5>
                                        </div>
                                        <div class="card-block" style="padding:0 25px;">
                                            <div class="earning-text mb-0">
                                                <h3 class="mb-2 text-white f-w-300">{{ $weeklyHits->sum('hits') }}</h3>
                                                <span class="text-uppercase text-white d-block">Weekly Total Hits</span>
                                            </div>
                                            <div id="Widget-line-chart" class="WidgetlineChart ChartShadow" style="height:180px;"></div>
                                        </div>
                                    </div>
                                    <div class="card">
                                        <div class="card-block border-bottom">
                                            <div class="row d-flex align-items-center">
                                                <div class="col-auto">
                                                    <i class="feather icon-user f-30 text-c-green"></i>
                                                </div>
                                                <div class="col">
                                                    <h3 class="f-w-300">{{ $administrator->count() }}</h3>
                                                    <span class="d-block text-uppercase">{{ Str::plural('Administrator', $administrator->count()) }}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card-block">
                                            <div class="row d-flex align-items-center">
                                                <div class="col-auto">
                                                    <i class="feather icon-more-vertical f-30 text-c-blue"></i>
                                                </div>
                                                <div class="col">
                                                    <h3 class="f-w-300">{{ $categories->count() }}</h3>
                                                    <span class="d-block text-uppercase">Message {{ Str::plural('category', $categories->count()) }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ statistics year chart ] end -->
                            </div>
                            <!-- [ Main Content ] end -->
                        </div>
                    </div>
    <!-- [ Main Content ] end -->
@endsection
@section('scripts')
    <script type="text/javascript">
        'use strict';
        $(document).ready(function() {
            function notify(message, type) {
                $.growl({
                    message: message
                }, {
                    type: type,
                    allow_dismiss: false,
                    label: 'Cancel',
                    className: 'btn-xs btn-inverse',
                    placement: {
                        from: 'bottom',
                        align: 'right'
                    },
                    delay: 5000,
                    animate: {
                        enter: 'animated fadeInRight',
                        exit: 'animated fadeOutRight'
                    },
                    offset: {
                        x: 30,
                        y: 30
                    }
                });
            };
            // notify('Use live Customizer for tons of layout options', 'inverse');

            // [ world-low chart ] start
            var latlong = {};
            latlong["KE"] = {
                "latitude": 1,
                "longitude": 38
            };

            var mapData = [
                {
                    "code": "KE",
                    "name": "Kenya",
                    "value": "{{ $visitors->count() }}",
                    "color": "#1dc4e9"
                }
            ];

            var minBulletSize = 3;
            var maxBulletSize = 70;
            var min = Infinity;
            var max = -Infinity;
            for (var i = 0; i < mapData.length; i++) {
                var value = mapData[i].value;
                if (value < min) {
                    min = value;
                }
                if (value > max) {
                    max = value;
                }
            }

            var maxSquare = maxBulletSize * maxBulletSize * 2 * Math.PI;
            var minSquare = minBulletSize * minBulletSize * 2 * Math.PI;

            var images = [];
            for (var i = 0; i < mapData.length; i++) {
                var dataItem = mapData[i];
                var value = dataItem.value;

                var square = (value - min) / (max - min) * (maxSquare - minSquare) + minSquare;
                if (square < minSquare) {
                    square = minSquare;
                }
                var size = Math.sqrt(square / (Math.PI * 8));
                var id = dataItem.code;

                images.push({
                    "type": "circle",
                    "theme": "light",
                    "width": size,
                    "height": size,
                    "color": dataItem.color,
                    "longitude": latlong[id].longitude,
                    "latitude": latlong[id].latitude,
                    "title": dataItem.name + "</br> [ " + value + " ]",
                    "value": value
                });
            }
            var map = AmCharts.makeChart("world-low", {
                "type": "map",
                "projection": "eckert6",

                "dataProvider": {
                    "map": "worldLow",
                    "images": images
                },
                "export": {
                    "enabled": true
                }
            });
            // [ world-low chart ] end

            // [ Widget-line-chart ] start
            var chartDatac = [
                    @foreach($weeklyHits as $hit)
                        {