@extends('adminlte::page')

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

@push('css')
<style>
  canvas#man_women_children_ratio, canvas#statistics,
  canvas#comorbidite_chart, canvas#age_chart{
    background-color: white!important;
    margin-bottom: .5rem;
    /* padding: 1rem; */
  }
</style>
@endpush

@section('content')

  @can('dashboard')
    <div class="row">

      <div class="col-md-8">
        <canvas id="man_women_children_ratio" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
        <canvas id="comorbidite_chart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
      </div>

      <div class="col-md-4">
        <canvas id="statistics" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
        <canvas id="age_chart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
      </div>
    </div>
  @endcan
@endsection

@can('dashboard')

  @section('adminlte_js')
      <script>
          var statistics = $('#statistics').get(0).getContext('2d')
          var statics_data = {
          labels: {!! json_encode(get_enabled_dcc_types(app()->getLocale(), true)) !!},
          datasets: [
              {
                data: {!! dcc_types_statistics_json() !!},
                backgroundColor : {!! dcc_types_colors_json() !!},
              }
            ]
          }

          const options = {
            maintainAspectRatio : false,
            responsive : true,
            plugins: {
              title: {
                display: true,
                text: '{{ __('global.Statistics') }}'
              }
            },
            layout: {
              padding: 20
            }
          }

          //Create pie or douhnut chart
          new Chart(statistics, {
            type: 'doughnut',
            data: statics_data,
            options: options
          });

          const man_women_children_ratio = $('#man_women_children_ratio').get(0).getContext('2d');
          //Create pie or douhnut chart
          const labels = {!! json_encode($months) !!};
          const data = {
            labels: labels,
            datasets: [
                {
                  label: '{{ __('global.Men') }} {{-- ({{ array_sum(array_values($stats['mens'])) }}) --}}',
                  data: {!! json_encode(array_values($stats['mens'])) !!},
                  backgroundColor: "#f39c12",
                  borderColor: "rgba(255, 153, 0, 0.2)"
                },
                {
                  label: '{{ __('global.Women') }} {{-- ({{ array_sum(array_values($stats['womens'])) }}) --}}',
                  data: {!! json_encode(array_values($stats['womens'])) !!},
                  backgroundColor: "rgba(255, 99, 132, 1)",
                  borderColor: "rgba(255, 99, 132, 0.2)"
                },
                {
                  label: '{{ __('global.Children') }} {{-- ({{ array_sum(array_values($stats['childrens'])) }}) --}}',
                  data: {!! json_encode(array_values($stats['childrens'])) !!},
                  backgroundColor: "#10a51a",
                },
                {
                  label: '{{ __('global.Teenager') }} {{-- ({{ array_sum(array_values($stats['adolescent'])) }}) --}}',
                  data: {!! json_encode(array_values($stats['adolescent'])) !!},
                  backgroundColor: "#10a51a",
                },
                {
                  label: '{{ __('global.Adult') }} {{-- ({{ array_sum(array_values($stats['adults'])) }}) --}}',
                  data: {!! json_encode(array_values($stats['adults'])) !!},
                  backgroundColor: "#10a51a",
                }
              ]
          };

          const config = {
            type: 'line',
            data: data,
            options: {
              plugins: {
                title: {
                  display: true,
                  text: '{{ __('global.Men') }} / {{ __('global.Women') }} / {{ __('global.Children') }} / {{ __('global.Teenager') }} / {{ __('global.Adult') }}'
                }
              },
            //   scales: {
            //     y: {
            //       stacked: true
            //     }
            //   },
              layout: {
                padding: 5//20
              },
              tension: 0.1
            }
          };

          console.log(config)
          new Chart (man_women_children_ratio, config);

          const age_chart = $('#age_chart').get(0).getContext('2d');
          new Chart(age_chart, {
            type: 'pie',
            data: {
              labels: ['{{ __('global.Men') }} ({{ get_total_old_men_vaccinated_this_year() }})', '{{ __('global.Women') }} ({{ get_total_old_women_vaccinated_this_year() }})'],
              datasets: [
                {
                  // label: 'Men',
                  data: [{{ get_total_old_men_vaccinated_this_year() }}, {{ get_total_old_women_vaccinated_this_year() }}],
                  backgroundColor: ["#42C3FA", "#F261FE"],
                }
              ]
            },
            options: {
              plugins: {
                title: {
                  display: true,
                  text: '{{ __('global.Older than 59') }} ({{ get_total_old_men_vaccinated_this_year()+get_total_old_women_vaccinated_this_year() }})'
                }
              },
              layout: {
                padding: 20
              }
            }
          });

          const comorbidite_chart = $('#comorbidite_chart').get(0).getContext('2d');
          new Chart(comorbidite_chart, {
              type: 'line',
              data: {
              labels: ['{{ __('global.Symptom') }}', '{{ __('global.Comorbiditie') }}', '{{ __('global.Others') }}'],
              datasets: [
                  {
                    label: '{{ __('global.Symptom') }} ({{ get_symtomes_stats_this_year() }})',
                    data: [{{ get_symtomes_stats_this_year() }}, 0, 0],
                    stack: 'combined',
                    type: 'bar',
                    backgroundColor: "#f39c12",
                  },
                  {
                    label: '{{ __('global.Comorbiditie') }} ({{ get_comorbidite_stats_this_year() }})',
                    data: [0, {{ get_comorbidite_stats_this_year() }}, 0],
                    stack: 'combined',
                    type: 'bar',
                    backgroundColor: "rgba(255, 99, 132, 1)",
                    borderColor: "rgba(255, 99, 132, 0.2)"
                  },
                  {
                    label: '{{ __('global.Others') }} ({{ get_divers_stats_this_year() }})',
                    data: [0, 0, {{ get_divers_stats_this_year() }}],
                    stack: 'combined',
                    type: 'bar',
                    backgroundColor: "#10a51a",
                  },
                ]
            },
            options: {
              plugins: {
                title: {
                  display: true,
                  text: '{{ __('global.Symptom') }} / {{ __('global.Comorbiditie') }} / {{ __('global.Others') }}'
                }
              },
              scales: {
                y: {
                  stacked: true
                }
              },
              layout: {
                padding: 20
              }
            },
          });
      </script>
  @endsection
@endcan