@extends('admin.layouts.container')

@section('content')

<!-- Add Year Selection Dropdown -->
<div class="col-lg-6 mb-3">
<label for="yearSelect"><h3>اختار السنة </h3></label>

<select id="yearSelect" class="form-control"> 
    @for ($y = 2024; $y <= 2040; $y++)
        <option value="{{ $y }}" @if($year == $y) selected @endif>{{ $y }}</option>
    @endfor
</select>

</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

    <input type="hidden" value="{{ $allVisitorCounts_year }}" class="allVisitorCounts_year">

    <div class="col-lg-12">
        <h5 class="text-uppercase font-weight-bold">زيارات الموقع خلال العام</h5>
        <canvas class="border-item lineChart" width="400" height="150"></canvas>
    </div>
    <!-- Rest of your code continues... -->
    <div class="col-lg-6 mb-3">
            <div class="new-users border-item">
                <div class="datatitle">
                    <h6 class="text-uppercase font-weight-bold" >  إجمالي عدد زيارات اليوم  ({{date('l')}})</h6>
                    <p>شهر: {{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"> الزيارات </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">   إجمالي عدد زيارات الشهر ({{date('F')}})</h6>
                    <p>شهر: {{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"> الزيارات </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 id="yearHeading" class="text-uppercase font-weight-bold">   إجمالي عدد زيارات السنة ({{ $year }})</h6>

                <p>سنة: {{$year }}</p>
            </div>

            <div class="items">
                <span class="number text-primary">
                    @php
                        /** @var TYPE_NAME $allVisitorCounts */
                        $percentage = $allVisitorCounts_year > 0 ? ($allVisitorCounts_year*100)/$allVisitorCounts_year . '%' : '0 %';
                    @endphp
                    {{$allVisitorCounts_year}}
                </span>
                <div class="progress-item">
                    <p class="info"> الزيارات </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">     إجمالي عدد زيارات الأسبوعي</h6>
                    <p>&nbsp;</p>

                </div>

                <div class="items">
                <span class="number text-primary">
                    @php
                        /** @var TYPE_NAME $weekVisitorCounts */
                        $percentage = $weekVisitorCounts > 0 ? ($weekVisitorCounts*100)/$weekVisitorCounts . '%' : '0 %';
                    @endphp
                    {{$weekVisitorCounts}}
                </span>
                    <div class="progress-item">
                        <p class="info"> الزيارات </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">          إجمالي عدد المستخدمين  </h6>
                    <p>&nbsp;</p>

                </div>

                <div class="items">
                <span class="number text-primary">
                    @php
                        /** @var TYPE_NAME $weekVisitorCounts */
                        $percentage = $allusers_Counts > 0 ? ($allusers_Counts*100)/$allusers_Counts . '%' : '0 %';
                    @endphp
                    {{$allusers_Counts}}
                </span>
                    <div class="progress-item">
                        <p class="info"> مستخدم </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">            إجمالي عدد المواضيع  </h6>
                    <p>&nbsp;</p>

                </div>

                <div class="items">
                <span class="number text-primary">
                    @php
                        /** @var TYPE_NAME $weekVisitorCounts */
                        $percentage = $allsubjects_Counts > 0 ? ($allsubjects_Counts*100)/$allsubjects_Counts . '%' : '0 %';
                    @endphp
                    {{$allsubjects_Counts}}
                </span>
                    <div class="progress-item">
                        <p class="info"> موضوع </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">              إجمال عدد التعليقات  </h6>
                    <p>&nbsp;</p>

                </div>

                <div class="items">
                <span class="number text-primary">
                    @php
                        /** @var TYPE_NAME $weekVisitorCounts */
                        $percentage = $allcomments_Counts > 0 ? ($allcomments_Counts*100)/$allcomments_Counts . '%' : '0 %';
                    @endphp
                    {{$allcomments_Counts}}
                </span>
                    <div class="progress-item">
                        <p class="info"> تعليق </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">        عدد طلبات الترجمة </h6>
                    <p>&nbsp;</p>

                </div>

                <div class="items">
                <span class="number text-primary">
                    @php
                        /** @var TYPE_NAME $weekVisitorCounts */
                        $percentage = $alltranslated_Counts > 0 ? ($alltranslated_Counts*100)/$alltranslated_Counts . '%' : '0 %';
                    @endphp
                    {{$alltranslated_Counts}}
                </span>
                    <div class="progress-item">
                        <p class="info"> طلب </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">          تصدير ملف اكسيل     </h6>
                    <p>&nbsp;</p>

                </div>

                <div class="items">
                <span class="number text-primary">
                <a href="{{ route('dashboard.export') }}" class="btn btn-primary">
                <img src="{{ asset('assets/admin/images/icons/images.svg') }}" alt="Download" style="width: 2px; height: 1px;">
                تصدير ملف اكسيل

                 </a>
                </span>
                <div class="progress-item">
                        <p class="info"> ملف </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">   اجمالي عدد طلبات التواصل ({{date('l')}})</h6>
                    <p>شهر: {{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"> طلبات التواصل  </p>
                        <div class="progress"><span class="bg-primary" data-value="{{$percentage}}"></span></div>
                    </div>
                </div>
            </div>
        </div> --}}
@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').get(0).getContext('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: ' عدد الزيارات',
                    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
                        }
                    }]
                }
            }
        });

        // Handle year change event
        $('#yearSelect').on('change', function () {
            var selectedYear = $(this).val();
            // Redirect the user with the selected year as a query parameter
            window.location.href = '?year=' + selectedYear;
        });
    });
</script>
<script>
    $(document).ready(function() {
    $('#yearSelect').on('change', function() {
        var selectedYear = $(this).val(); // Get the selected year from the dropdown
        $('#yearHeading').text('عدد الزيارات خلال عام (' + selectedYear + ')'); // Update the heading
    });
});

    </script>
@endsection