@extends('layouts.dash')
@section('title') Analyses @stop
@section('title_card',"")



@section('content')


<!-- Districts -->
<div class="row">
    <div class="col-md-12">
        <div class="card">
        <div class="card-header bg-{{ App\Models\MyApp::COLOR_AIDES[$type_aide] }}">
            {!! App\Models\MyApp::TYPES_AIDES[$type_aide]." - Graphique" !!}
        </div>
        <div class="card-body">
            <div class="chart"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div>
                <canvas id="barChart_d" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%; display: block; width: 590px;" width="472" height="200" class="chartjs-render-monitor"></canvas>
            </div>
        </div>
        </div>
    </div>
</div>

<!-- Villages -->
<div class="row">
  <div class="col-md-12">
    <div class="card">
      <div class="card-header bg-{{ App\Models\MyApp::COLOR_AIDES[$type_aide] }}">
          {!! App\Models\MyApp::TYPES_AIDES[$type_aide]." - Graphique" !!}
      </div>
      <div class="card-body">
        <div class="chart"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div>
            <canvas id="barChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%; display: block; width: 590px;" width="472" height="200" class="chartjs-render-monitor"></canvas>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@section('styles')
    
@stop

@section('scripts')
    <!-- Graph  -->
    <script src="{{ url('js\chart.js\chart.umd.js') }}"></script>

  <script>
      $(function () {

        var areaChartData = {
        labels  : {!! json_encode($t_label) !!},
        datasets: [
          {
            label               : '{!! $legende_data !!}',
            backgroundColor     : 'rgba(60,141,188,0.9)',
            borderColor         : 'rgba(60,141,188,0.8)',
            pointRadius          : false,
            pointColor          : '#3b8bba',
            pointStrokeColor    : 'rgba(60,141,188,1)',
            pointHighlightFill  : '#fff',
            pointHighlightStroke: 'rgba(60,141,188,1)',
            data                : {!! json_encode($t_data) !!}
          },

        ]
      }
      //-------------
      //- BAR CHART -
      //-------------
      var barChartCanvas = $('#barChart').get(0).getContext('2d')
      var barChartData = $.extend(true, {}, areaChartData)
      barChartData.datasets[0] = areaChartData.datasets[0]
      new Chart(barChartCanvas, {
        type: 'bar',
        data: barChartData,
        options: {
          responsive              : true,
          maintainAspectRatio     : false,
          datasetFill             : true,
        }
      })
    });
  </script>

<script>
    $(function () {

      var areaChartData_d = {
      labels  : {!! json_encode($t_label_d) !!},
      datasets: [
        {
          label               : '{!! $legende_data_d !!}',
          backgroundColor     : 'rgba(60,141,188,0.9)',
          borderColor         : 'rgba(60,141,188,0.8)',
          pointRadius          : false,
          pointColor          : '#3b8bba',
          pointStrokeColor    : 'rgba(60,141,188,1)',
          pointHighlightFill  : '#fff',
          pointHighlightStroke: 'rgba(60,141,188,1)',
          data                : {!! json_encode($t_data_d) !!}
        },

      ]
    }
    //-------------
    //- BAR CHART -
    //-------------
    var barChartCanvas_d = $('#barChart_d').get(0).getContext('2d')
    var barChartData_d = $.extend(true, {}, areaChartData_d)
    barChartData_d.datasets[0] = areaChartData_d.datasets[0]
    new Chart(barChartCanvas_d, {
      type: 'bar',
      data: barChartData_d,
      options: {
        responsive              : true,
        maintainAspectRatio     : false,
        datasetFill             : true,
      }
    })
  });
</script>

  <script>
    $(function () {
      $("#_table").DataTable({
        "paging": false,
        "lengthChange": false,
        "searching": false,
        "ordering": true,
        "info": false,
        "responsive": false,
        "autoWidth": false,
        "fixedHeader": true,
        oLanguage: {
              "sZeroRecords": "Aucune ligne",
              "sInfo": "Affichage de _START_ &agrave; _END_ sur _TOTAL_ lignes",
              "sInfoEmpty": "Showing 0 to 0 of 0 records",
              "sInfoFiltered": "(sur un total de _MAX_ lignes)",
              "oPaginate": {"sPrevious": "Pr&eacute;c&eacute;dente","sNext": "Suivante"
                  ,"sFirst": "Premi&egrave;re","sLast": "Derni&egrave;re"},
                  "sSearch":"Chercher",
              buttons: {
                  colvis: 'Colonnes à afficher',
                  copy: 'Copier',print: 'Imprimer',
                  copyTitle: 'Ajouté au presse-papiers',
                  copyKeys: 'Appuyez sur <i>ctrl</i> ou <i>\u2318</i> + <i>C</i> pour copier les données du tableau à votre presse-papiers. <br><br>Pour annuler, cliquez sur ce message ou appuyez sur Echap.',
                  copySuccess: {
                      _: '%d lignes copiées',
                      1: '1 ligne copiée'
                      }
                  }

          },
          dom: "<'row'<'col-sm-6'l><'col-sm-6'f>>" + "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-12'B>>",

          "buttons": ["copy", "excel"] //"print", "pdf", "csv",, "colvis"
      })
      .buttons().container().appendTo('#_table_wrapper .col-md-6:eq(0)');

    });
  </script>

@endsection