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

        <div class="row">
            <div class="col-xl-3">
                <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-primary" 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">{{ __('messages.All Tasks') }}</p>
                            </div>
                            <div class="avatar-sm mb-4">
                                <div class="avatar-title bg-primary-subtle text-primary fs-24 rounded">
                                    <i class="bi bi-clipboard-data"></i>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex flex-wrap flex-lg-nowrap justify-content-between align-items-end">
                            <i class="bi bi-graph-up-arrow me-1"></i>
                            <h3 class="mb-0 d-flex">{{ $data['all_tasks'] }} </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 -->



            <div class="col-xl-3">
                <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-dark" 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">{{ __('messages.Create Status Task') }}</p>
                            </div>
                            <div class="avatar-sm mb-4">
                                <div class="avatar-title bg-dark-subtle text-dark fs-24 rounded">
                                    <i class="bi bi-clipboard-data"></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"> {{ $data['create_tasks'] }} </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 -->


            <div class="col-xl-3">
                <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-danger" 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">{{ __('messages.Pending Task') }}</p>
                            </div>
                            <div class="avatar-sm mb-4">
                                <div class="avatar-title bg-danger-subtle text-danger fs-24 rounded">
                                    <i class="bi bi-clipboard-data"></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">{{ $data['pending_tasks'] }}</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 -->

            <div class="col-xl-3">
                <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-success" 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">{{ __('messages.Done Task') }}</p>

                            </div>
                            <div class="avatar-sm mb-4">
                                <div class="avatar-title bg-success-subtle text-success fs-24 rounded">
                                    <i class="bi bi-clipboard-data"></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">{{ $data['done_tasks'] }}</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 -->


            <div class="col-xl-3">
                <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-primary" 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">{{ __('messages.Total In') }}</p>
                            </div>
                            <div class="avatar-sm mb-4">
                                <div class="avatar-title bg-primary-subtle text-primary fs-24 rounded">
                                    <i class="bi bi-clipboard-data"></i>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex flex-wrap flex-lg-nowrap justify-content-between align-items-end">
                            <i class="bi bi-graph-up-arrow me-1"></i>
                            <h3 class="mb-0 d-flex">{{ $data["total_in"] }} </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 -->



            <div class="col-xl-3">
                <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-dark" 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">{{ __('messages.Total Out') }}</p>
                            </div>
                            <div class="avatar-sm mb-4">
                                <div class="avatar-title bg-dark-subtle text-dark fs-24 rounded">
                                    <i class="bi bi-clipboard-data"></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">  {{ $data["total_out"] }} </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 -->


            <div class="col-xl-3">
                <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-danger" 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">{{ __('messages.Total') }}</p>
                            </div>
                            <div class="avatar-sm mb-4">
                                <div class="avatar-title bg-danger-subtle text-danger fs-24 rounded">
                                    <i class="bi bi-clipboard-data"></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">{{ $data["total_in"] - $data["total_out"] }}</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 -->

            <div class="col-xl-3">
                <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-success" 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">{{ __('messages.Total Owed') }}</p>

                            </div>
                            <div class="avatar-sm mb-4">
                                <div class="avatar-title bg-success-subtle text-success fs-24 rounded">
                                    <i class="bi bi-clipboard-data"></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">{{ $data["total_owed"] }}</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 -->

            <div class="col-xl-6">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title mb-0">{{ __('messages.customer_in') }}</h4>
                    </div>
                    <div class="card-body">
                        <div dir="ltr">
                            <div id="datalabels-column" data-data="{{ json_encode($data['customer_in']) }}"
                                class="apex-charts" data-colors="#007aff"></div>
                        </div>
                    </div>
                    <!-- end card body-->
                </div>
                <!-- end card -->
            </div>
            <div class="col-xl-6">
              <div class="card">
                  <div class="card-header">
                      <h4 class="card-title mb-0">{{ __('messages.customer_out') }}</h4>
                  </div>
                  <div class="card-body">
                      <div dir="ltr">
                          <div id="datalabels-column2" data-data="{{ json_encode($data['customer_out']) }}"
                              class="apex-charts" data-colors="#007aff"></div>
                      </div>
                  </div>
                  <!-- end card body-->
              </div>
              <!-- end card -->
          </div>
        </div>
    </div>
@endsection

@section('script')
    <!-- Apex Chart Area Demo js -->
    <script src="https://apexcharts.com/samples/assets/stock-prices.js"></script>
    <script src="https://apexcharts.com/samples/assets/series1000.js"></script>
    <script src="https://apexcharts.com/samples/assets/github-data.js"></script>
    <script src="https://apexcharts.com/samples/assets/irregular-data-series.js"></script>
    <!-- Apex Chart Candlestick Demo js -->
    <script src="https://apexcharts.com/samples/assets/ohlc.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.8.17/dayjs.min.js"></script>
    <script src="{{ asset('') }}assets/js/pages/apex2.init.js"></script>

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

    <script>
        {{--  

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

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

            window.location.href = url;


        })

        $(".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 orders_counts = "{{ $data['orders_charts']['count'] }}".split(",");
    var orders_month = "{{ $data['orders_charts']['month'] }}".split(",");

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


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

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

      };

      var order_chart = new ApexCharts(document.querySelector("#orders_report_charts"), options_order);
      order_chart.render();




      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