@extends('admin.layouts.container')

@section('content')
    <div class="home_boxes w-100">
            <div class="row">
                <div class="col-lg-6">
                    <a href="#" class="items">
                        <div class="info">
                            <h5>عدد الأخبار </h5>
                            <h2>{{$products}}</h2>
                        </div>
                        <div class="img">
                            <img src="{{asset('/assets/admin/images/mobile-marketing-animate.svg')}}" alt="">
                            
                        </div>
                    </a>
                </div>
                <div class="col-lg-6">
                    <a href="#" class="items">
                        <div class="info">
                            <h5>عدد الأقسام </h5>
                            <h2>{{$categories}}</h2>
                        </div>
                        <div class="img">
                            <img src="{{asset('/assets/admin/images/grid-design-animate.svg')}}" alt="">
                        </div>
                    </a>
                </div>
                <div class="col-lg-6">
                    <a href="#" class="items">
                        <div class="info">
                            <h5>{{__('products.count') .' '.__('products.messages')}}   </h5>
                            <h2>{{$contacts}}</h2>
                        </div>
                        <div class="img">
                            <img src="{{asset('/assets/admin/images/new-message-animate.svg')}}" alt="">
                        </div>
                    </a>
                </div>
                <div class="col-lg-6">
                    <a href="#" class="items">
                        <div class="info">
                            <h5>{{__('products.count') .' '.__('products.comments')}}     </h5>
                            <h2>{{$comments}}</h2>
                        </div>
                        <div class="img">
                            <img src="{{asset('/assets/admin/images/status-update-animate.svg')}}" alt="">
                        </div>
                    </a>
                </div>
                  <div class="col-lg-6">
                    <a href="#" class="items">
                        <div class="info">
                            <h5>{{__('products.count') .' '.__('products.visitors')}}   </h5>
                            <h2>{{$visitors}}</h2>
                        </div>
                        <div class="img">
                           <img src="{{asset('/assets/admin/images/status-update-animate.svg')}}" alt="">
                        </div>
                    </a>
                </div>
                 <div class="col-lg-6">
                    <a href="#" class="items">
                        <div class="info">
                            <h5>{{__('products.count') .' '.__('products.users')}}   </h5>
                            <h2>{{$users}}</h2>
                        </div>
                        <div class="img">
                            <img src="{{asset('/assets/admin/images/status-update-animate.svg')}}" alt="">
                        </div>
                    </a>
                </div>
                @if(!is_null($category))
                 <div class="col-lg-6">
                    <a href="#" class="items">
                        <div class="info">
                            <h5>الأكثر زيارة : {{categoryname($category->id)}}   </h5>
                            <h2>{{$category->counter}}</h2>
                        </div>
                        <div class="img">
                            <img src="{{asset('/assets/admin/images/status-update-animate.svg')}}" alt="">
                        </div>
                    </a>
                </div>
                @endif
                 @if(!is_null($product))
                <div class="col-lg-6">
                    <a href="#" class="items">
                        <div class="info">
                            <h5>الأكثر زيارة : {{productname($product->id)}}   </h5>
                            <h2>{{$product->visit_counts}}</h2>
                        </div>
                        <div class="img">
                            <img src="{{asset('/assets/admin/images/status-update-animate.svg')}}" alt="">
                        </div>
                    </a>
                </div>
                @endif
                 <div class="col-lg-6">
                    <a href="#" class="items">
                        <div class="info">
                            <h5>{{__('products.download_day') .' '. date('Y-m-d')}}   </h5>
                            <h2>@if(is_null($day)) 0 @else {{$day->counter}} @endif</h2>
                        </div>
                        <div class="img">
                            <img src="{{asset('/assets/admin/images/status-update-animate.svg')}}" alt="">
                        </div>
                    </a>
                </div>
                
                
                
                
                
            </div>
        </div>
<div class="col-lg-12"> <br><br>
        <h5 class="text-uppercase font-weight-bold">الأقسام</h5>
        <div class="new-users border-item">
   
        <table class="table table-bordered table-hover" style="text-align:center">
            <thead>
                <th>#</th>
                <th>{{__('products.category')}}</th>
                <th>عدد الأخبار</th>
            </thead>
            
            <tbody  >
                @foreach($allCategories as $key=>$row)
                <tr data-target="#exampleModal" data-toggle="modal">
                <td>{{$key+1}}</td>
                <td>{{categoryname($row->id)}}</td>
                <td>{{categorynews($row->id)}}</td>
@endforeach
</tr>
            </tbody>
        </table>
    </div>
    </div>
<!--<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-6 mb-3">-->
    <!--    <div class="new-users border-item">-->
            

    <!--        <div class="items">-->
    <!--            <span class="number text-primary">-->
    <!--                {{$products}}-->
    <!--            </span>-->
    <!--            <div class="progress-item">-->
    <!--                <p class="info"> {{__('products.product')}} </p>-->
                   
    <!--            </div>-->
    <!--        </div>-->
    <!--    </div>-->
    <!--</div>-->
    <!--<div class="col-lg-6 mb-3">-->
    <!--    <div class="new-users border-item">-->
            

    <!--        <div class="items">-->
    <!--            <span class="number text-primary">-->
    <!--                {{$categories}}-->
    <!--            </span>-->
    <!--            <div class="progress-item">-->
    <!--                <p class="info"> {{__('categories.category')}} </p>-->
                   
    <!--            </div>-->
    <!--        </div>-->
    <!--    </div>-->
    <!--</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: ' 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>--}}
{{--    new Chart(document.getElementById("chartjs-4"), {--}}
{{--        "type": "doughnut",--}}
{{--        "data": {--}}
{{--            "labels": ["completed Profiles", "uncompleted Profiles", "waiting Approval"],--}}
{{--            "datasets": [{--}}
{{--                "label": "My First Dataset",--}}
{{--                "data": [180, 90, 120],--}}
{{--                "backgroundColor": ["rgb(33, 255, 13)", "rgb(220, 53, 69)", "rgb(21, 97, 203)"]--}}
{{--            }]--}}
{{--        }--}}
{{--    });--}}
{{--</script>--}}

@endsection