{% extends "layout/backEndLayout.html.twig" %}

{% block content %}

<div class="row flex-nowrap justify-content-between align-items-center">
    <div class="col-3">
        <select class="form-select" id="select_room" aria-label="Default select example">
        <option    value="0" >Toutes les classes?</option>
        {% for room in rooms %}
                <option {% if app.request.get('id') == room.id %}selected{% endif %}  value={{room.id}}>{{room.name}}</option>
            {% endfor %}
        </select>
    </div>
    <div class="col-3">
          <a class="btn btn-warning" target="_blank" href="{{ path('admin_stat_print_gender_room', {id:  (app.request.get('id') is defined) ? app.request.get('id') : 0 }) }}">
             <i class="fa fa-file" aria-hidden="true">&nbsp;</i>Repartition des eleves par sexes
          </a>
        </div>
        <div class="col-3">
          <a class="btn btn-secondary" target="_blank" href="{{ path('admin_stat_print_age_room', {id:  (app.request.get('id') is defined) ? app.request.get('id') : 0 }) }}">
             <i class="fa fa-file" aria-hidden="true">&nbsp;</i>Repartition par tranche d'age
          </a>
        </div>
        <div class="col-3">
          <a class="btn btn-primary" target="_blank" href="{{ path('admin_stat_print_age_room_gender', {id:  (app.request.get('id') is defined) ? app.request.get('id') : 0 }) }}">
             <i class="fa fa-file" aria-hidden="true">&nbsp;</i>Par sexe et par tranche d'age
          </a>
        </div>
</div>

<div class="row flex-nowrap justify-content-between align-items-center">
    <div class="col-8">

        <canvas id="canvas_gender">
        </canvas>
    </div>
    <div class="col-4">

        <canvas id="canvas_age_group">
        </canvas>
    </div>
</div>
<div class="row flex-nowrap justify-content-between align-items-center">
     <canvas id="canvas_age_group_gender">

     </canvas>
</div>
{% endblock %}

{% block javascripts %}
  {{ parent() }}

    <script>
      let canvas_gender =$("#canvas_gender"), 
      canvas_age_group =$("#canvas_age_group"),
      canvas_age_group_gender =$("#canvas_age_group_gender"),
      scatterData = {{ scatterData | raw }};
        console.log(scatterData);

       const datasets = [];
       const randomRgbColor = () => {
          let r = Math.floor(Math.random() * 256); // Random between 0-255
          let g = Math.floor(Math.random() * 256); // Random between 0-255
          let b = Math.floor(Math.random() * 256); // Random between 0-255
          return 'rgb(' + r + ',' + g + ',' + b + ')';
      };
       let colors_age_group =[];
      ({{ageGroupsLabel|raw}}).forEach(function(label) {
          colors_age_group.push(randomRgbColor());
      });
           
      

           {% if masculin is defined %}
              datasets.push( {
                  label: "Masculin",
                  data : {{masculin|raw}},
                  fill : false,
                  backgroundColor: randomRgbColor()
            } )
           {% endif %}
          {% if feminin is defined %}
              datasets.push( {
                  label: "Feminin",
                  data : {{feminin|raw}},
                  fill : false,
                  backgroundColor: randomRgbColor()
            } )
           {% endif %}

       let graph_gender = new Chart(canvas_gender, {
                            type:"bar",
                            data : {
                                labels: {{ roomNames|raw }},
                                datasets: datasets,
                            }, 
                             options: {
                                plugins: {
                                    title: {
                                        display: true,
                                        text: ' Repartition des sexes par classe ',
                                        font: {
                                            size: 24,
                                          
                                            family: 'Helvetica Neue',
                                        },
                                        position: 'bottom',
                                        
                                    }
                                }
                            }
                        });
       $('#select_room').on('change', function() {
            postData = {
              "id":  $(this).val()
            };
            $.ajax({
                type: "GET",
                url: "{{ path('admin_graph_update')}}",
                data: postData,
                datatype: "json",
                success: function (response) {
                        window.location.href = response.url;
                },
                error: function (e) {
                  console.log(e.message);
                }
          });
        });
        
        

         let graph_age_group = new Chart(canvas_age_group, {
                            type:"pie",
                            data : {
                                labels: {{ ageGroupsLabel|raw }},
                                datasets: [{ 
                                  data : {{ ageGroupsWeight|raw }},
                                  backgroundColor: colors_age_group
                                }]
                            }, 
                             options: {
                                plugins: {
                                    title: {
                                        display: true,
                                        text: ' Repartition des tranches d\'ages par classe ',
                                        font: {
                                            size: 24,
                                            family: 'Helvetica Neue',
                                        },
                                        position: 'bottom',
                                    }
                                }
                            }
                        });
        
        let graph_age_group_gender = new Chart(canvas_age_group_gender, {
                           
                    type: 'bubble',
                    data: {
                         datasets: [{
                                label: 'Homme',
                                data: ({{scatterData|raw}}).filter(item => item.sexe === '0').map(item => ({
                                    x: item.age,
                                    y: item.sexe === '0' ? 1 : 0,
                                    r: item.poids
                                })),
                                backgroundColor: 'rgba(255, 99, 132, 0.5)'
                            }, {
                                label: 'Femme',
                                data: ({{scatterData|raw}}).filter(item => item.sexe === '1').map(item => ({
                                    x: item.age,
                                    y: item.sexe === '1' ? 1 : 0,
                                    r: item.poids
                                })),
                                backgroundColor: 'rgba(155, 199, 132, 0.5)'
                        }]
                    },
                     
                    options: {
                    scales: {
                        x: {
                            type: 'linear',
                            position: 'bottom',
                            title: {
                                display: true,
                                text: 'Tranche d\'âge'
                            }
                        },
                        y: {
                            title: {
                                display: true,
                                text: 'Sexe'
                            }
                        }
                    }},
                    plugins: {
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    var data = context.dataset.data[context.dataIndex];
                                    var label = 'Age: ' + data.age + ', Sexe: ' + (data.sexe === 0 ? 'Homme' : 'Femme') + ', Poids: ' + data.poids;
                                    return label;
                                }
                            }
                        }
                    }
                    
                    }
                        );

        
       
       $('#select_room').on('change', function() {
            postData = {
              "id":  $(this).val()
            };
            $.ajax({
                type: "GET",
                url: "{{ path('admin_graph_update')}}",
                data: postData,
                datatype: "json",
                success: function (response) {
                        window.location.href = response.url;
                },
                error: function (e) {
                  console.log(e.message);
                }
          });
        });

    </script>
{% endblock %}