@extends('panel::layouts.master', ['title' => 'لوحة التحكم'])

@section('content')
    <x-common-breadcrumbs :noprefix="true">
        <li><a>الصفحة الرئيسية</a></li>
    </x-common-breadcrumbs>

    {{-- إحصائيات الرأس --}}
    @include('panel::content-sections/header-stats')

    <div class="row m-0 p-0">
        {{-- زوار الموقع --}}
        @include('panel::content-sections.site-visitors')

        {{-- زيارات المقالات --}}
        @include('panel::content-sections.articles-visits')

        {{-- المقالات --}}
        @include('panel::content-sections/articles')

        {{-- الفئات --}}
        @include('panel::content-sections/categories')

        {{-- العلامات --}}
        @include('panel::content-sections/tags')

        {{-- الصور --}}
        @include('panel::content-sections/images')

        {{-- التعليقات --}}
        @include('panel::content-sections/comments')
    </div>

@endsection

@push('scripts')
    <script src="{{ asset('admin/assets/plugins/jquery-incremental-counter/jquery.incremental-counter.min.js') }}"></script>
    <script src="{{ asset('admin/assets/plugins/raphael/raphael.min.js') }}"></script>
    <script src="{{ asset('admin/assets/plugins/morris.js/morris.min.js') }}"></script>
    <script>
        $(".counter-down").incrementalCounter({digits: 'auto'});
    </script>
    <script>
        Morris.Donut({
            element: 'site-visits-yearly',
            data: [
                {value: {{ $visitsCount['yearly'] }}, label: 'سنة', formatted: '{{ $visitsCount['yearly'] }} زائر'},
                {value: {{ $visitsCount['monthly'] }}, label: 'شهر', formatted: '{{ $visitsCount['monthly'] }} زائر'},
                {value: {{ $visitsCount['weekly'] }}, label: 'أسبوع', formatted: '{{ $visitsCount['weekly'] }} زائر'},
            ],
            colors: [
                '#1e4572',
                '#597bbd',
                '#6da1f1',
            ],
            formatter: function (x, data) {
                return data.formatted;
            },
            resize: true
        });

        Morris.Donut({
            element: 'site-visits-daily',
            data: [
                {value: {{ $visitsCount['daily'] }}, label: 'يوم', formatted: '{{ $visitsCount['daily'] }} زائر'},
                {value: {{ $visitsCount['ten_hours'] }}, label: 'عشر ساعات', formatted: '{{ $visitsCount['ten_hours'] }} زائر'},
                {value: {{ $visitsCount['hourly'] }}, label: 'ساعة', formatted: '{{ $visitsCount['hourly'] }} زائر'},
            ],
            colors: [
                '#ffc107',
                '#e36100',
                '#d50000',
            ],
            formatter: function (x, data) {
                return data.formatted;
            },
            resize: true
        });
    </script>
    <script>
        Morris.Donut({
            element: 'articles-visits-yearly',
            data: [
                {value: {{ $articlesVisitsCount['year'] }}, label: 'سنة', formatted: '{{ $articlesVisitsCount['year'] }} زائر'},
                {value: {{ $articlesVisitsCount['month'] }}, label: 'شهر', formatted: '{{ $articlesVisitsCount['month'] }} زائر'},
                {value: {{ $articlesVisitsCount['week'] }}, label: 'أسبوع', formatted: '{{ $articlesVisitsCount['week'] }} زائر'},
            ],
            colors: [
                '#1e4572',
                '#597bbd',
                '#6da1f1',
            ],
            formatter: function (x, data) {
                return data.formatted;
            },
            resize: true
        });

        Morris.Donut({
            element: 'articles-visits-daily',
            data: [
                {value: {{ $articlesVisitsCount['day'] }}, label: 'يوم', formatted: '{{ $articlesVisitsCount['day'] }} زائر'},
                {value: {{ $articlesVisitsCount['10hours'] }}, label: 'عشر ساعات', formatted: '{{ $articlesVisitsCount['10hours'] }} زائر'},
                {value: {{ $articlesVisitsCount['hour'] }}, label: 'ساعة', formatted: '{{ $articlesVisitsCount['hour'] }} زائر'},
            ],
            colors: [
                '#ffc107',
                '#e36100',
                '#d50000',
            ],
            formatter: function (x, data) {
                return data.formatted;
            },
            resize: true
        });
    </script>
@endpush