@extends('adminlte::page')

@section('content_wrapper_class', 'bg-white')

@section('content_header')
  <h1>{{ __('global.Dashboard') }}</h1>
  <small>{{ __('global.Welcome') }}</small>
@endsection

@section('content')

<div class="row">
  <div class="col-sm-12">
    <h4>@lang('global.Usagers')</h4>
  </div>
  @php
    $total_usagers = get_all_usagers()->count();
    $total_uo_particular = get_total_usager_by_category('LIB_CATEGORIE_PARTICULIER');
    $total_uo_enterprise = get_total_usager_by_category('LIB_CATEGORIE_ENTREPRISE');
    $total_uo_other = get_total_usager_by_category('LIB_CATEGORIE_AUTRE');

    $total_uo_other_percentage = $total_uo_particular_percentage = $total_uo_enterprise_percentage = 0;
    if($total_usagers) {

      $total_uo_other_percentage = number_format($total_uo_other/$total_usagers*100);
      $total_uo_particular_percentage = $total_uo_particular/$total_usagers*100;
      $total_uo_enterprise_percentage = $total_uo_enterprise/$total_usagers*100;
    }

  @endphp

  <div class="col-md-3 col-sm-12">
    <x-adminlte-info-box id="waiting_signed"
      :title="__('global.Total Usagers')"
      :text="$total_usagers"
      :progress="100"
      icon="far fa-bookmark"
      description="100% of Total Usagers"
      theme="gradient-info" />
  </div>

  <div class="col-md-3 col-sm-12">
    <x-adminlte-info-box id="waiting_signed"
      :title="__('global.Total Usagers(Particular)')"
      :text="$total_uo_particular"
      :progress="$total_uo_particular_percentage"
      icon="far fa-bookmark"
      :description="($total_uo_particular_percentage).__('global.% Of Total Usagers')"
      theme="gradient-info" />
  </div>

  <div class="col-md-3 col-sm-12">
    <x-adminlte-info-box id="waiting_signed"
      :title="__('global.Total Usagers(Company)')"
      :text="$total_uo_enterprise"
      :progress="$total_uo_enterprise_percentage"
      icon="far fa-bookmark"
      :description="($total_uo_enterprise_percentage).__('global.% Of Total Usagers')"
      theme="gradient-info" />
  </div>

  <div class="col-md-3 col-sm-12">
    <x-adminlte-info-box id="waiting_signed"
      :title="__('global.Total Usagers(Other)')"
      :text="$total_uo_other"
      :progress="$total_uo_other_percentage"
      icon="far fa-bookmark"
      :description="($total_uo_other_percentage).__('global.% Of Total Usagers')"
      theme="gradient-info" />
  </div>
</div>

<div class="row">
  <div class="col-md-3">
    <x-adminlte-info-box id="roue_2"
      :title="__('global.2Roues')"
      :text="$total_2_routes"
      :progress="100"
      icon="far fa-bookmark"
      description="100% of 2 Route"
      theme="gradient-info" />
  </div>

  <div class="col-md-3">
    <x-adminlte-info-box id="roue_3"
      :title="__('global.3Roues')"
      :text="$total_3_routes"
      :progress="100"
      icon="far fa-bookmark"
      description="100% of 3 Route"
      theme="gradient-info" />
  </div>

  <div class="col-md-3">
    <x-adminlte-info-box id="roue_4"
      :title="__('global.4Roues')"
      :text="$total_4_routes"
      :progress="100"
      icon="far fa-bookmark"
      description="100% of 4 Route"
      theme="gradient-info" />
  </div>

  <div class="col-md-3">
    <x-adminlte-info-box id="roue_autre"
      :title="__('global.Autres')"
      :text="$total_autre_routes"
      :progress="100"
      icon="far fa-bookmark"
      description="100% of autre Route"
      theme="gradient-info" />
  </div>
</div>

<div class="row">
  <x-col width="12">
    <canvas id="pvr-stats"></canvas>
  </x-col>
</div>
@endsection

@can('dashboard')

  @section('adminlte_js')
      <script>
      const pvr_data = {
        labels: {!! json_encode(get_months_name()) !!},
        datasets: {!! collect($pvrs)->map(function ($pvr, $key) {

          return [
            'label' => $key,
            'data' => $pvr
          ];
        })->values() !!}
      };

      console.log(pvr_data)
          /**
           *
           * [
            {
              label: 'Dataset 1',
              data: Utils.numbers(NUMBER_CFG),
              borderColor: Utils.CHART_COLORS.red,
              backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
            },
            {
              label: 'Dataset 2',
              data: Utils.numbers(NUMBER_CFG),
              borderColor: Utils.CHART_COLORS.blue,
              backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5),
            }
          ]
           * **/

          let delayed;
          const config = {
            type: 'line',
            data: pvr_data,
            options: {
              responsive: true,
              plugins: {
                legend: {
                  position: 'top',
                },
                title: {
                  display: true,
                  text: 'Chart.js Line Chart'
                }
              },
              animation: {
                onComplete: () => { delayed = true; },
                delay: (context) => {
                  let delay = 0;
                  if (context.type === 'data' && context.mode === 'default' && !delayed) {
                    delay = context.dataIndex * 300 + context.datasetIndex * 100;
                  }
                  return delay;
                }
              }
            }
          };

          const pvr_stats = document.getElementById("pvr-stats").getContext('2d')
          new Chart(pvr_stats, config);
      </script>
  @endsection
@endcan