@extends('admin.layouts.container')

@section('content')
@if(\Auth::user()->role != 'sub_admin')
    <div class="dashbord_home">
        <div class="row">
    
        <!-- ------------ line chart ------------- -->
        <input type="hidden" value="{{$allVisitorCounts }}" class="allVisitorCounts">
        <!--<div class="col-lg-12">-->
        <!--    <h5 class="text-uppercase font-weight-bold">مشاهدات الموقع هذا العام</h5>-->
        <!--    <canvas class="border-item lineChart" width="400" height="150"></canvas>-->
        <!--</div>-->
    
    {{--    <div class="col-lg-6">--}}
    {{--        <div class="new-users border-item">--}}
    {{--            <div class="datatitle">--}}
    {{--                <h6>The proportion of new users</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-products: none; z-index: -1;"></iframe>--}}
    {{--                <canvas id="chartjs-4" class="chartjs" width="962" height="550" style="display: block; height: 500px; width: 770px;"></canvas>--}}
    {{--            </div>--}}
    {{--        </div>--}}
    {{--    </div>--}}
    
    
        <div class="col-lg-8 mb-5 offset-lg-2 mt-5">
            <!--<div class="table_box mt-4">-->
            <!--    <div class="table_content">-->
            <!--        <div class="item_row">-->
            <!--            <a href="{{route('admin.birth')}}">-->
            <!--                <h4>-->
            <!--                     عرض الاشخاص اصحاب عيد الميلاد اليوم  {{date('Y-m-d')}} الكوبون : {{$cobon_today->code}}-->
            <!--                </h4>-->
            <!--            </a>-->
            <!--        </div>-->
            <!--    </div>-->
            <!--</div>-->
            <a href="{{route('admin.birth')}}" class="border-item cong_card text-center d-block">
                <h6 class="mb-3"> عرض الاشخاص اصحاب عيد الميلاد اليوم  </h6>
                <img src="https://citybike.omar.alyomhost.org/assets/web/images/percentage.png" alt="" class="icon">
                <p class="الكوبون"></p>
                <h4 class="mb-4 fw-bold"> {{$cobon_today->code}} </h4>
                <img src="https://citybike.omar.alyomhost.org/assets/web/images/cong.png" alt="" class="bg">
            </a>
        </div>
    
        <div class="col-lg-4 mb-3">
            <div class="new-users border-item">
                <div class="items">
                    <div class="ico"> <i class="bi bi-eye"></i> </div>
                    <span class="number text-primary">
                        {{$allVisitorCounts}}
                    </span>
                    <div class="progress-item">
                        <h1 class="info"> اجمالي الزيارات </h1>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 mb-3">
            <div class="new-users border-item">
                <div class="items">
                    <div class="ico"> <i class="bi bi-eye"></i> </div>
                    <span class="number text-primary">
                        {{$yearVisitCounts}}
                    </span>
                    <div class="progress-item">
                        <h1 class="info"> عدد الزيارات هذا العام </h1>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 mb-3">
            <div class="new-users border-item">
                <div class="items">
                    <div class="ico"> <i class="bi bi-eye"></i> </div>
                    <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">
                        <h1 class="info"> عدد الزيارات هذا الشهر </h1>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 mb-3">
            <div class="new-users border-item">
                <div class="items">
                    <div class="ico"> <i class="bi bi-eye"></i> </div>
                    <span class="number text-primary">
                        {{$weekVisitorCounts}}
                    </span>
                    <div class="progress-item">
                        <h1 class="info"> عدد الزيارات هذا الاسبوع </h1>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 mb-3">
            <div class="new-users border-item">
                <div class="items">
                    <div class="ico"> <i class="bi bi-eye"></i> </div>
                    <span class="number text-primary">
                        {{$dayVisitCounts}}
                    </span>
                    <div class="progress-item">
                        <h1 class="info"> عدد الزيارات هذا اليوم </h1>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 mb-3">
            <div class="new-users border-item">
                <div class="items">
                    <div class="ico"> <i class="bi bi-people"></i> </div>
                    <span class="number text-primary">
                        {{$members}}
                    </span>
                    <div class="progress-item">
                        <h1 class="info"> مجموع العملاء بالموقع </h1>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 mb-3">
            <div class="new-users border-item">
                <div class="items">
                    <div class="ico"> <i class="bi bi-people"></i> </div>
                    <span class="number text-primary">
                        {{$sellers}}
                    </span>
                    <div class="progress-item">
                        <h1 class="info"> مجموع المسوقين بالموقع </h1>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 mb-3">
            <div class="new-users border-item">
                <div class="items">
                    <div class="ico"> <i class="bi bi-building"></i> </div>
                    <span class="number text-primary">
                        {{$companies}}
                    </span>
                    <div class="progress-item">
                        <h1 class="info"> مجموع الشركات بالموقع </h1>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 mb-3">
            <div class="new-users border-item">
                <div class="items">
                    <div class="ico"> <i class="bi bi-box2"></i> </div>
                    <span class="number text-primary">
                        {{$product_paid}}
                    </span>
                    <div class="progress-item">
                        <h1 class="info">عدد المنتجات المباعة </h1>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 mb-3">
            <div class="new-users border-item">
                <div class="items">
                    <div class="ico"> <i class="bi bi-currency-dollar"></i> </div>
                    <span class="number text-primary">
                        {{round($income,2)}}
                    </span>
                    <div class="progress-item">
                        <h1 class="info">ايرادات المبيعات </h1>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 mb-3">
            <div class="new-users border-item">
                <div class="items">
                    <div class="ico"> <i class="bi bi-eye"></i> </div>
                    <span class="number text-primary">
                        {{$category_views}}
                    </span>
                    <div class="progress-item">
                        <h1 class="info">مجموع زيارات الاقسام</h1>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 mb-3">
            <div class="new-users border-item">
                <div class="items">
                    <div class="ico"> <i class="bi bi-eye"></i> </div>
                    <span class="number text-primary">
                        {{$product_views}}
                    </span>
                    <div class="progress-item">
                        <h1 class="info">مجموع زيارات المنتجات </h1>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 mb-3">
            <div class="new-users border-item">
                <section class="best_arrangement">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="table_box mt-4">
                                <div class="table_title mb-4">
                                    <div class="row align-items-center">
                                        <div class="col-lg-12">
                                            <h3> العملاء الاكثر شرءا</h3>
                                        </div>
                                    </div>
                                </div>
                                <div class="table_content">
                                    <div class="item_row">
                                        <p> أسم المستخدم </p> 
                                        <p> أسم الدولة </p> 
                                        <p> أسم المدينة </p> 
                                        <p> عدد الطلبات </p> 
                                    </div>
                                    @foreach($buyers as $key=>$user)
                                    <div class="item_row">
                                        <p> {{$user->user ? $user->user->name : ''}} </p> 
                                        <p> {{$user->user ? ($user->user->country ? $user->user->country->currentDescription->name : '') : ''}} </p> 
                                        <p> {{$user->user ? ($user->user->city ? $user->user->city->currentDescription->name : '') : ''}} </p> 
                                        <p> {{$user->count}} </p> 
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                    
                </section>
            </div>
        </div>
        
        <div class="col-lg-6 mb-3">
            <div class="new-users border-item">
                <section class="best_arrangement">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="table_box mt-4">
                                <div class="table_title mb-4">
                                    <div class="row align-items-center">
                                        <div class="col-lg-12">
                                            <h3> المنتجات الاكثر شرءا  </h3>
                                        </div>
                                    </div>
                                </div>
                                <div class="table_content">
                                    <div class="item_row">
                                        <p> أسم المنتج </p> 
                                        <p> عدد الطلبات </p> 
                                    </div>
                                    @foreach($products_paid as $key=>$product)
                                    <div class="item_row">
                                        <p> {{$product->product->currentDescription->name}} </p> 
                                        <p> {{$product->count}} </p> 
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                    
                </section>
            </div>
        </div>
        
        
        <div class="col-lg-6 mb-3">
            <div class="new-users border-item">
                <section class="best_arrangement">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="table_box mt-4">
                                <div class="table_title mb-4">
                                    <div class="row align-items-center">
                                        <div class="col-lg-12">
                                            <h3> اكثر العملاء الذكور طلبا  </h3>
                                        </div>
                                    </div>
                                </div>
                                <div class="table_content">
                                    <div class="item_row">
                                        <p> أسم المستخدم </p> 
                                        <p> عدد الطلبات </p> 
                                        <p> # </p> 
                                    </div>
                                    @foreach($males as $key=>$user)
                                    <div class="item_row">
                                        <p> {{$user->user->name}} </p> 
                                        <p> {{$user->count}} </p> 
                                        <p> 
                                            <a href="{{route ('members.edit', $user->user->id)}}">
                                                <img src="{{ asset('assets/admin/images/icons/eye.svg') }}" alt="{{ __('dashboard.show') }}">
                                            </a> 
                                        </p> 
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                    
                </section>
            </div>
        </div>
        <div class="col-lg-6 mb-3">
            <div class="new-users border-item">
                <section class="best_arrangement">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="table_box mt-4">
                                <div class="table_title mb-4">
                                    <div class="row align-items-center">
                                        <div class="col-lg-12">
                                            <h3> اكثر العملاء الاناِث طلبا  </h3>
                                        </div>
                                    </div>
                                </div>
                                <div class="table_content">
                                    <div class="item_row">
                                        <p> أسم المستخدم </p> 
                                        <p> عدد الطلبات </p> 
                                        <p> # </p> 
                                    </div>
                                    @foreach($females as $key=>$user)
                                    <div class="item_row">
                                        <p> {{$user->user->name}} </p> 
                                        <p> {{$user->count}} </p> 
                                        <p> 
                                            <a href="{{route ('members.edit', $user->user->id)}}">
                                                <img src="{{ asset('assets/admin/images/icons/eye.svg') }}" alt="{{ __('dashboard.show') }}">
                                            </a> 
                                        </p> 
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                    
                </section>
            </div>
        </div>
    </div>
    </div>
@endif
@endsection

@section('inner_js')<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: ' 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>



@endsection
