@extends('layouts.admin')
@section('content')
<div class="container-fluid">

    <div class="row">
        @foreach ($data["counts"] as $key=>$value )
        <div class="col-xl-4">
            <div class="card overflow-hidden border-top-0">
                <div class="progress progress-sm rounded-0 bg-light" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
                    <div class="progress-bar bg-{{ $value['color'] }}" style="width: 100%"></div>
                </div>
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="">
                            <p class="text-muted fw-semibold fs-16 mb-1">{{ $key }}</p>

                        </div>
                        <div class="avatar-sm mb-4">
                            <div class="avatar-title bg-{{ $value['color'] }}-subtle text-{{ $value['color'] }} fs-24 rounded">
                                <i class="{{ $value['icon'] }}"></i>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex flex-wrap flex-lg-nowrap justify-content-between align-items-end">
                        <h3 class="mb-0 d-flex">{{ $value["value"] }}</h3>
                        <div class="d-flex align-items-end h-100">
                            <div id="daily-orders" data-colors="#007aff"></div>
                        </div>
                    </div>
                </div><!-- end card-body -->
            </div><!-- end card -->
        </div><!-- end col -->

        @endforeach





    </div>






     Statistics users

    <div class="row">
        <div class="col-lg-12 order-1 order-lg-2">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <div class="">
                        <h4 class="card-title">{{ __("messages.Users") }} ({{ $data['users_charts']['count_all'] }}) <span class="input_lable_note">{{ __("messages.Click on the three dots to view statistics for previous years") }}</span></h4>
                        @php
                            $user_year = date('Y');
                            if(request('user_year')){
                                $user_year = request('user_year');
                            }
                        @endphp
                        <p class="text-muted fw-semibold mb-0">{{ __("messages.Statistics for the year") . " : " .  $user_year }}</p>

                    </div><!-- end card-header -->
                    <div class="dropdown">
                        <a href="#" class="dropdown-toggle arrow-none card-drop"
                            data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="ri-more-2-fill"></i>
                        </a>
                        <div class="dropdown-menu dropdown-menu-end">
                            @for($i =$data['min_user_year']  ; $i <= $data['max_user_year'] ; $i++)
                                <a  data-year="{{ $i }}" href="javascript:void(0);" class="dropdown-item user_years_list">{{ $i }}</a>
                            @endfor


                        </div>
                    </div>
                    <!-- end dropdown -->
                </div>
                <div class="card-body">
                    <div class="pt-3 show">
                        <div id="users_report_charts" data-colors="#007aff, #3f3f46" class="apex-charts" dir="ltr"></div>
                    </div>

                </div> <!-- end card-body-->
            </div> <!-- end card-->
        </div> <!-- end col-->
    </div><!-- end row -->


</div>
@endsection

@section('script')
<script src="{{ asset('') }}assets/js/pages/dashboard.js"></script>

<script>



    $(function(){

        $(".user_years_list").click(function(e){
            var year = $(this).data('year');

            var order_year_param = new URLSearchParams(window.location.search).get('order_year');
            var url = "{{ route('admin.home') }}?user_year="+year;
            if(order_year_param){
                url = url + "&order_year="+order_year_param
            }

            window.location.href = url;


        })
    })
</script>

<script>


    var users_counts = "{{ $data['users_charts']['count'] }}".split(",");
    var users_month = "{{ $data['users_charts']['month'] }}".split(",");







      var options_user = {
        series: [{
        name: "{{ __('messages.Count : ') }}",
        data: users_counts
      },

    ],
        chart: {
        height: 350,
        type: 'area'
      },
      dataLabels: {
        enabled: false
      },
      stroke: {
        curve: 'smooth'
      },
      xaxis: {
        type: 'string',
        categories: users_month
      }

      };

      var user_chart = new ApexCharts(document.querySelector("#users_report_charts"), options_user);
      user_chart.render();
</script>
@endsection