{% extends 'base.html.twig' %}

{% block title %}Détails statistiques{% endblock %}

{% block body %}
<div class="row">
    <div class="col-md-12 grid-margin">
        <div class="d-flex justify-content-between flex-wrap">
            <div class="d-flex align-items-end flex-wrap">
                <div class="d-flex">
                  <i class="mdi mdi-home text-muted hover-cursor"></i>
                  <p class="text-muted mb-0 hover-cursor">
                    &nbsp;/&nbsp;
                    <a class="student-dashbord-service" href="{{ path('home') }}">Tableau de bord</a>
                  </p>
                  {% if is_granted('ROLE_SUPER_ADMIN') %} 
                    <p class="text-muted mb-0 hover-cursor">
                      &nbsp;/&nbsp;
                      <a class="student-dashbord-service" href="{{ path('statistics_list') }}">Statistiques</a>
                      &nbsp;/&nbsp;
                    </p>
                    <p class="text-primary mb-0 hover-cursor">{{ customer }}</p>
                  {% else %}
                    <p class="text-muted mb-0 hover-cursor">
                      &nbsp;/&nbsp;
                      <p class="text-primary mb-0 hover-cursor">Statistiques</p>
                    </p>
                  {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body bloc-radius bloc-border bloc-box-shadow">
        <p class="card-title">
          Détails statistiques {{ customer }}
        </p>
        <div id="statistics">
            {# Inscription d'élèves #}
            <div class="col-sm-12">
                <div id="stats-students">
                    <div class="row">
                        <div class="col-sm-12">
                          <h3 class="m-portlet__head-text">Inscription d'élèves</h3>
                        </div>
                        <div class="col-sm-12 border p-3">
                            <label>Filtrer </label>
                            <div class="btn-group">
                                <div class="input-daterange input-group mx-2">
                                    <input type="date" id="students-start" class="date start form-control">
                                    <input type="date" id="students-end" class="date end form-control">
                                </div>
                                {# by establishment #}
                                {% if ( (establishments is defined) and (establishments | length > 0) ) %}
                                  <button id="dropdown-establishment" type="button" class="btn btn-light mx-2 " style="border-radius:25px; background-color: #F4F4ED" style="border-radius:25px" data-bs-toggle="dropdown" aria-expanded="false">
                                    Établissements
                                  </button>
                                  <ul class="dropdown-menu select-establishment">
                                      <li><a href="#" data-value="" class="dropdown-item">Tous</a></li>
                                      <li><hr class="dropdown-divider"></li>
                                      {% for establishment in establishments %}

                                          <li><a href="#" data-value="{{establishment.id}}" class="dropdown-item">{{establishment|capitalize}}</a></li>
                                      {% endfor %}
                                  </ul>
                                {% endif %}
                                {# by driver license #}
                                <button id="dropdown-driver-license"  type="button" class="btn btn-light mx-2 dropdown-toggle" style="border-radius:25px; background-color: #F4F4ED" data-bs-toggle="dropdown" aria-expanded="false">
                                    Permis
                                </button>
                                <ul class="dropdown-menu select-driver-license">
                                    {% for driversLicense in driversLicenses %}
                                        <li><a href="#" data-value="{{driversLicense.id}}" class="dropdown-item">{{driversLicense|capitalize}}</a></li>
                                    {% endfor %}
                                </ul>
                                {# by duration#}
                                <button id="dropdown-date"  type="button" class="btn btn-light mx-2 dropdown-toggle" style="border-radius:25px; background-color: #F4F4ED" data-bs-toggle="dropdown" aria-expanded="false">
                                    Par durée
                                </button>
                                <ul class="dropdown-menu select-date">
                                    <li><a href="#" data-value="this-year" class="dropdown-item">Cette année</a></li>
                                    <li><a href="#" data-value="last-twelve-months" class="dropdown-item">12 derniers mois</a></li>
                                    <li><a href="#" data-value="last-6-months" class="dropdown-item">6 derniers mois</a></li>
                                    <li><a href="#" data-value="last-4-months" class="dropdown-item">4 derniers mois</a></li>
                                    <li><a href="#" data-value="last-2-months" class="dropdown-item">2 derniers mois</a></li>
                                    <li><hr class="dropdown-divider"></li>
                                    <li><a href="#" data-value="current-month" class="dropdown-item">Mois en cours</a></li>
                                </ul>
                                <a href="javascript:;" class="btn btn-light mx-2" style="border-radius:25px; background-color: #F4F4ED" id="btn-export-students"><span><i class="mdi mdi-download"></i></span></a>
                            </div>
                        </div>
                        <div class="col-sm-12 border p-3">
                            <div id="chartdiv-students" style="width:100%;height:250px"></div>
                            <p class="lead text-center mt-4 text-primary sum"></p>
                        </div>
                </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</div>
{# HIDDEN INPUTES #}
<input type="hidden" id="id_customer" value="{{customer.id}}">
{% endblock %}

{% block pageJavascript %}
  <script src="https://www.amcharts.com/lib/4/core.js"></script>
  <script src="https://www.amcharts.com/lib/4/charts.js"></script>
  <script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
  <script>
    var id_customer = $('#id_customer').val();
    var driversLicense = null;
    var establishment = null;
    function dateFormat(date, start = true){
      year = date.getFullYear();
      month = date.getMonth()+1;
      return `${year}-${month}-1`;
    }
    //amcharts function    
    function amcharts(datas, selector, numberFormat){
      // Themes begin
      am4core.useTheme(am4themes_animated);
      // Themes end
      // Create chart instance
      var chart = am4core.create(selector, am4charts.XYChart);
      chart.data = datas;
      // Round all numbers to integer
      chart.numberFormatter.numberFormat = numberFormat;
      // Create axes
      var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
      categoryAxis.dataFields.category = "month";
      categoryAxis.renderer.grid.template.location = 0;
      categoryAxis.renderer.minGridDistance = 30;


      var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

      function createSeries(field, name){
        // Set up series
        var series = chart.series.push(new am4charts.ColumnSeries());
        series.name = name;
        series.dataFields.valueY = field;
        series.dataFields.categoryX = "month";
        series.sequenceInterpolation = true;

        // Make it stacked
        series.stacked = true;

        // Configure columns
        series.columns.template.width = am4core.percent(60);
        series.columns.template.fill = "#198fe9";
        series.columns.template.stroke = "#35BBaa";
        series.columns.template.tooltipText = "[bold]{name}[/]\n[font-size:14px]{categoryX} : {valueY}";

        // Add label
        var labelBullet = series.bullets.push(new am4charts.LabelBullet());
        labelBullet.label.text = "{valueY}";
        labelBullet.locationY = 0.5;

        series.legendSettings.labelText = ' '
        return series
      }
      for( let field of Object.keys(datas[0])){
        if(field !== "month") createSeries(field, field)
      }
      chart.legend = new am4charts.Legend();
      chart.legend.itemContainers.template.tooltipText= '[bold]{name}[/]'
    }
    //content charge
    jQuery(document).ready( function(){
      
      var date = new Date
      var currentYear = date.getFullYear();

      function selectDate(selector, stats, chartdiv, typeNb){
         const loader = '<div style="display:block;"><div class="ml-5"><i class="fas fa-spinner fa-spin"></i> Chargement...</div></div>';
        $(chartdiv).html(loader);
        $.ajax({
          type: 'post',
          url: '{{ path('json_statistics')}}',
          data: {
            'start':`${currentYear}-01-01`,
            'end': `${currentYear}-12-31`,
            'stats': stats,
            'establishment': establishment,
            'id_customer': id_customer,
            'driver_license': driversLicense
          },
          success: function(datas){
            if(datas.state === 'error'){
              $(chartdiv).html('<div>coucou '+datas.message+'</div>');              
            } else {
              $(selector+' .date.start').val(datas.date.start);
              $(selector+' .date.end').val(datas.date.end);
              $(selector+' .sum').html(`Total : ${datas.sum} ${typeNb} - Moyenne : ${datas.average} ${typeNb}`);
              amcharts(datas.data, chartdiv, '# '+typeNb);
              $("g [aria-labelledby$='-title']" ).remove();
            }
          },
					error: function (e) {
            $(chartdiv).html("Oups !! Une erreur inattendue, veuillez réessayer s'il vous plaît");
					}
        })
        $("g[aria-labelledby]").hide();
        $(selector+' .date').change(function(){
          $('#'+chartdiv).html(loader)
          var data = {
            'start': $(selector+' .date.start')[0].value, 
            'end': $(selector+' .date.end')[0].value, 
            'establishment': establishment,
            'stats': stats,
            'id_customer': id_customer,
            'driver_license': driversLicense
            }
            $.ajax({
              type: "post",
              url: '{{ path('json_statistics')}}',
              data: data,
              success: function(datas){
                $(selector+' .sum').html(`Total : ${datas.sum} ${typeNb} - Moyenne : ${datas.average} ${typeNb}`);
                amcharts(datas.data, chartdiv, '#'+typeNb);
                $("g [aria-labelledby$='-title']" ).remove();
              }
            });
        });
        //
        $('.select-date').click(function(e){
          e.preventDefault();
          $('#'+chartdiv).html(loader)
          var end = dateFormat(date);
          switch(e.target.getAttribute('data-value')){
            case 'this-year':
              var start = `${currentYear}-01-01`;
              end = `${currentYear}-12-31`
              break;
            case 'last-twelve-months':
              var interval = 11;
              break;
            case 'last-6-months':
              var interval = 5;
              break;
            case 'last-4-months':
              var interval = 3;
              break;
            case 'last-2-months':
              var interval = 1;
              break;
            case 'current-month':
              var interval = 0;
              break;
          }
          $.ajax({
            type: "post",
            url: '{{ path('json_statistics')}}',
            data: {
              'start': start,
              'end': end,
              'interval': interval,
              'establishment': establishment,
              'stats': stats,
              'id_customer': id_customer,
              'driver_license': driversLicense              
            },
            success: function(datas){
              $(selector+' .date.start').val(datas.date.start);
              $(selector+' .date.end').val(datas.date.end);
              $(selector+' .sum').html(`Total : ${datas.sum} ${typeNb} - Moyenne : ${datas.average} ${typeNb}`);
              amcharts(datas.data, chartdiv, `# ${typeNb}`);
              $("g [aria-labelledby$='-title']" ).remove();
            }
          });
        });
        //select establishment
        $('.select-establishment').click(function(e){
            e.preventDefault();
            $('#'+chartdiv).html(loader)
            establishment = e.target.getAttribute('data-value');
            $('#dropdown-establishment').html(e.target.innerText === 'Tous' ? 'Établissements' : e.target.innerText)

            $.ajax({
              type: "post",
              url: '{{ path('json_statistics')}}',
              data: {
                'start': $(selector+' .date.start')[0].value, 
                'end': $(selector+' .date.end')[0].value, 
                'establishment': establishment,
                'stats': stats,
                'id_customer': id_customer,
                'driver_license': driversLicense
              },
              success: function(datas){
                $(selector+' .date.start').val(datas.date.start);
                $(selector+' .date.end').val(datas.date.end);
                $(selector+' .sum').html(`Total : ${datas.sum} ${typeNb} - Moyenne : ${datas.average} ${typeNb}`);
                amcharts(datas.data, chartdiv, `# ${typeNb}`);
                $("g [aria-labelledby$='-title']" ).remove();
              }
            });
        })
        //select driver license
        $('.select-driver-license').click(function(e){
            e.preventDefault();
            $('#'+chartdiv).html(loader)
            driversLicense = e.target.getAttribute('data-value');
            $('#dropdown-driver-license').html(e.target.innerText === 'Tous' ? 'Permis' : e.target.innerText)
            $.ajax({
              type: "post",
              url: '{{ path('json_statistics')}}',
              data: {
                'start': $(selector+' .date.start')[0].value, 
                'end': $(selector+' .date.end')[0].value, 
                'establishment': establishment,
                'stats': stats,
                'id_customer': id_customer,
                'driver_license': driversLicense
              },
              success: function(datas){
                $(selector+' .date.start').val(datas.date.start);
                $(selector+' .date.end').val(datas.date.end);
                $(selector+' .sum').html(`Total : ${datas.sum} ${typeNb} - Moyenne : ${datas.average} ${typeNb}`);
                amcharts(datas.data, chartdiv, `# ${typeNb}`);
                $("g [aria-labelledby$='-title']" ).remove();
              }
            });
        })

      }
      //export liste des élèves inscrits
      $('#btn-export-students').click(function(e){
          const element = $(this);
          element.html('<i class="fas fa-spinner fa-spin"></i>');

          let start = $("#students-start")[0].value;
          let end = $("#students-end")[0].value;

          var startDay = new Date(start);
          var endDay = new Date(end);
          days = (endDay- startDay) / (1000 * 60 * 60 * 24);

          if(days > 365){
            alert("Afin d'exporter la liste des élèves inscrits. Veuillez choisir un intervalle inférieur a 366 jours");
            return false;
          }
          e.preventDefault();
          $.ajax({
            type: 'post',
            url: '{{ path('export_elv')}}',
            data: {
              'start': start, 
              'end': end, 
              'establishment': establishment,
              'id_customer': id_customer,
              'driver_license': driversLicense              
            },
            success: function(data){
              let filename = 'liste_d_eleves_inscrits.csv';
              let csvFile = new Blob([data], {type: "text/csv"});
              let downloadLink = document.createElement("a");
              downloadLink.download = filename;
              downloadLink.href = window.URL.createObjectURL(csvFile);
              document.body.appendChild(downloadLink);
              downloadLink.click();
              element.html('<span><i class="mdi mdi-download text-white"></i></span>');
              },
              error: function() {
                  element.html('<span><i class="mdi mdi-download text-white"></i></span>');
              }
        })
      });
      //
      selectDate('#stats-students', 'students', 'chartdiv-students', ' élèves')
    });

  </script>
{% endblock %}