@extends('admin.layouts.container')

@section('content')

<div class="row">
    @for ($i = 1; $i < 13 ; $i++)
        @if (array_key_exists($i, $monthVisitCounts))
            @continue
        @endif
        @php $monthVisitCounts[$i] = 0; @endphp
    @endfor

    @php ksort($monthVisitCounts); @endphp



    @foreach ($monthVisitCounts as $month => $count)
            <input type="hidden" name="{{$month}}" value="{{$count}}" class="monthVisitCounts">
    @endforeach

    <!-- ------------ line chart ------------- -->
    <input type="hidden" value="{{$allVisitorCounts}}" class="allVisitorCounts">
    <div class="col-lg-12">
        <h5 class="text-uppercase font-weight-bold">{{__('dashboard.website_views_in_this_year')}}</h5>
        <canvas class="border-item lineChart" width="400" height="150"></canvas>
    </div>

        <div class="col-lg-4 mb-4">
            <div class="new-users border-item">
                <div class="datatitle">
                    <h6>{{__('dashboard.app_user_proportion')}}</h6>
                    {{--                <p>2019-06-13 ~ 2019-06-19 | Last 7 days</p>--}}
                </div>
                <div class="chartjs-wrapper"><iframe class="chartjs-hidden-iframe" tabindex="-1" style="display: block; overflow: hidden; border: 0px; margin: 0px; top: 0px; left: 0px; bottom: 0px; right: 0px; height: 100%; width: 100%; position: absolute; pointer-events: none; z-index: -1;"></iframe>
                    <canvas id="users" class="chartjs" width="962" height="550" style="display: block; height: 500px; width: 770px;"></canvas>
                </div>
            </div>
        </div>
        <div class="col-lg-4 mb-4">
            <div class="new-users border-item">
                <div class="datatitle">
                    <h6>{{__('dashboard.transactions_proportion')}}</h6>
                    {{--                <p>2019-06-13 ~ 2019-06-19 | Last 7 days</p>--}}
                </div>
                <div class="chartjs-wrapper"><iframe class="chartjs-hidden-iframe" tabindex="-1" style="display: block; overflow: hidden; border: 0px; margin: 0px; top: 0px; left: 0px; bottom: 0px; right: 0px; height: 100%; width: 100%; position: absolute; pointer-events: none; z-index: -1;"></iframe>
                    <canvas id="transactions" class="chartjs" width="962" height="550" style="display: block; height: 500px; width: 770px;"></canvas>
                </div>
            </div>
        </div>
        <div class="col-lg-4 mb-4">
            <div class="new-users border-item">
                <div class="datatitle">
                    <h6>{{__('dashboard.currency_page_visitor')}}</h6>
                    {{--                <p>2019-06-13 ~ 2019-06-19 | Last 7 days</p>--}}
                </div>
                <div class="chartjs-wrapper"><iframe class="chartjs-hidden-iframe" tabindex="-1" style="display: block; overflow: hidden; border: 0px; margin: 0px; top: 0px; left: 0px; bottom: 0px; right: 0px; height: 100%; width: 100%; position: absolute; pointer-events: none; z-index: -1;"></iframe>
                    <canvas id="currency" class="chartjs" width="962" height="550" style="display: block; height: 500px; width: 770px;"></canvas>
                </div>
            </div>
        </div>

    <div class="col-lg-6 mb-3">
        <div class="new-users border-item">
            <div class="datatitle">
                <h6 class="text-uppercase font-weight-bold">{{__('dashboard.user_visit_in_year')}} ({{date('Y')}})</h6>
                <p>{{__('dashboard.year')}}: {{date('Y')}}</p>
            </div>

            <div class="items">
                <span class="number text-primary">
                    @php
                        /** @var TYPE_NAME $allVisitorCounts */
                        $percentage = $allVisitorCounts > 0 ? ($allVisitorCounts*100)/$allVisitorCounts . '%' : '0 %';
                    @endphp
                    {{$allVisitorCounts}}
                </span>
                <div class="progress-item">
                    <p class="info"> {{__('dashboard.visits')}} </p>
                    <div class="progress"><span class="bg-primary" data-value="{{$percentage}}"></span></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-6 mb-3">
        <div class="new-users border-item">
            <div class="datatitle">
                <h6 class="text-uppercase font-weight-bold">{{__('dashboard.user_visit_in_month')}} ({{date('F')}})</h6>
                <p>{{__('dashboard.month')}}: {{date('m')}}</p>
            </div>

            <div class="items">
                <span class="number text-primary">
                    @php
                        /** @var TYPE_NAME $monthVisitCounts */
                        /** @var TYPE_NAME $allVisitorCounts */
                        $month = date('n');
                        $count = $monthVisitCounts[$month];
                        $percentage = $count > 0 ? ($count*100)/$allVisitorCounts . '%' : '0 %';
                    @endphp
                    {{$count}}
                </span>
                <div class="progress-item">
                    <p class="info">{{__('dashboard.visits')}}</p>
                    <div class="progress"><span class="bg-primary" data-value="{{$percentage}}"></span></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-6 mb-3">
        <div class="new-users border-item">
            <div class="datatitle">
                <h6 class="text-uppercase font-weight-bold">{{__('dashboard.user_visit_in_week')}} ({{date('W')}})</h6>
                <p>{{__('dashboard.week')}}: {{date('W')}}</p>
            </div>

            <div class="items">
                <span class="number text-primary">
                    @php
                        /** @var TYPE_NAME $weekVisitorCounts */
                        $percentage = $weekVisitorCounts > 0 ? ($weekVisitorCounts*100)/$allVisitorCounts . '%' : '0 %';
                    @endphp
                    {{$weekVisitorCounts}}
                </span>
                <div class="progress-item">
                    <p class="info"> {{__('dashboard.visits')}} </p>
                    <div class="progress"><span class="bg-primary" data-value="{{$percentage}}"></span></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-6 mb-3">
        <div class="new-users border-item">
            <div class="datatitle">
                <h6 class="text-uppercase font-weight-bold">{{__('dashboard.user_visit_today')}} ({{date('l')}})</h6>
                <p>{{__('dashboard.day')}}: {{date('F')}}</p>
            </div>

            <div class="items">
                <span class="number text-primary">
                    @php
                        /** @var TYPE_NAME $dayVisitCounts */
                        $percentage = !empty($dayVisitCounts) ? ($dayVisitCounts*100)/$allVisitorCounts . '%' : '0 %'
                    @endphp
                    {{!empty($dayVisitCounts) ? $dayVisitCounts : 0}}
                </span>
                <div class="progress-item">
                    <p class="info"> {{__('dashboard.visits')}} </p>
                    <div class="progress"><span class="bg-primary" data-value="{{$percentage}}"></span></div>
                </div>
            </div>
        </div>
    </div>

{{--    <div class="col-md-12 mt-5">--}}
{{--        <table class="table table-bordered shadow">--}}
{{--            <thead>--}}
{{--            <tr>--}}
{{--                <td colspan="3" class="card-header text-center">--}}
{{--                    <h5 class="text-uppercase font-weight-bold">Most viewed articles</h5>--}}
{{--                </td>--}}
{{--            </tr>--}}
{{--            <tr class="bg-dark text-white">--}}
{{--                <th style="width: 10%" class="text-center">Serial</th>--}}
{{--                <th>Article title</th>--}}
{{--                <th style="width: 15%" class="text-center">Visited count</th>--}}
{{--            </tr>--}}
{{--            </thead>--}}
{{--            <tbody>--}}
{{--            @foreach ($articles as $article)--}}
{{--                <tr>--}}
{{--                    <td class="text-center">{{$loop->iteration}}</td>--}}
{{--                    <td>{{$article->title}}</td>--}}
{{--                    <td>{{$article->visit_counts}}</td>--}}
{{--                </tr>--}}
{{--            @endforeach--}}

{{--            </tbody>--}}
{{--        </table>--}}
{{--    </div>--}}


</div>
@endsection

@section('inner_js')
{{--<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>--}}
<script src="{{asset('assets/admin/js/lib/Chart.min.js')}}"></script>
<script>
    $(document).ready(function () {
        let months = [],
            month_visits = [],
            allVisitorCounts = $('.allVisitorCounts').val(),
            ChartHtml = $('.lineChart').html('2d');

        $('.monthVisitCounts').each(function () {
            months.push($(this).attr('name'));
            month_visits.push($(this).val());
        });

        month_visits.push(allVisitorCounts);

        new Chart(ChartHtml, {
            type: 'line',
            data: {
                labels: months,
                datasets: [{
                    label: "{{__('dashboard.people')}}",
                    data: month_visits,
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });
    })
</script>


<script>
    let users = "{{$users}}",
        activeUsers = "{{$activeUsers}}",
        deActiveUsers = "{{$deActiveUsers}}",
        transactions = "{{$transactions}}",
        canceledTrans = "{{$canceledTrans}}",
        newTrans = "{{$newTrans}}",
        currencyPageVisit = "{{$currencyPageVisit}}";
    new Chart(document.getElementById("users"), {
        "type": "doughnut",
        "data": {
            "labels": ["{{__('dashboard.all_app_users')}}", "{{__('dashboard.active_users')}}", "{{__('dashboard.non_active_users')}}"],
            "datasets": [{
                "label": "My First Dataset",
                "data": [users, activeUsers, deActiveUsers],
                "backgroundColor": ["rgb(21, 97, 203)", "rgb(33, 255, 13)", "rgb(220, 53, 69)"]
            }]
        }
    });

    new Chart(document.getElementById("transactions"), {
        "type": "doughnut",
        "data": {
            "labels": ["{{__('dashboard.all_trans')}}", "{{__('dashboard.new_trans')}}", "{{__('dashboard.cancelled_trans')}}"],
            "datasets": [{
                "label": "My First Dataset",
                "data": [transactions, newTrans, canceledTrans],
                "backgroundColor": ["rgb(21, 97, 203)", "rgb(33, 255, 13)", "rgb(220, 53, 69)"]
            }]
        }
    });

    new Chart(document.getElementById("currency"), {
        "type": "doughnut",
        "data": {
            "labels": ["{{__('dashboard.currency_page_visitor')}}"],
            "datasets": [{
                "label": "My First Dataset",
                "data": [currencyPageVisit],
                "backgroundColor": ["rgb(21, 97, 203)"]
            }]
        }
    });
</script>

@endsection