{% extends "base_page.html" %}
{% block more_heads %}

<link href="{{ url_for('main.static', filename='css/charges.css', version=config.VERSION) }}" rel="stylesheet"
  type="text/css" />

{% endblock %}

{% block content %}

<!-- Invisible span to definte wich ul and a in the navbar are actived -->
<span id="nav_actived" style="display: none">agent,agents_stats</span>

<div class="pdc-controls">
  <select title="Choisir la période" id="period_id_select" name="period_id_select">
    {% for p in periods %}
    <option value="{{ p.id }}" {{ "selected" if p.id == 1 }}>{{ p.name }}</option>
    {% endfor %}
  </select>
  <button id='prev_period' title="Période précédente"><span data-feather="chevron-left"></span></button>
  <button id='next_period' title="Période suivante"><span data-feather="chevron-right"></span></button>
</div>

<h3 class="sub-header">Tout le laboratoire</h3>

<div class="row">
  <div class="col-4">
    <div class="charge_chart" id="agents_by_status_chart"></div>
  </div>
  <div class="col-8">
    <div class="charge_chart" id="charge_by_status_chart"></div>
  </div>
</div>

{% endblock %}

{% block more_scripts %}

{% include 'hg-includes.html' %}
{% include 'charges-includes.html' %}

<script>

  // time period selection
  let period_select_update = function (step) {
    let select_elemnt = $('#period_id_select');
    let selectoptions_length = $('#period_id_select option').length;
    let next_step = +select_elemnt.val() + step;

    if (next_step <= 0 || next_step > selectoptions_length) {
      return;
    }

    select_elemnt.val(next_step);
    select_elemnt.trigger('change');
  };


  document.getElementById('next_period').onclick = function () {
    period_select_update(1);
  };

  document.getElementById('prev_period').onclick = function () {
    period_select_update(-1);
  };

  // event handling
  $('#period_id_select').on('change', function () {
    let period_id = $(this).find(':selected').val();
    let period_name = $(this).find(':selected').text();
    update_chart(period_id, period_name);
  });

  let update_chart = function (period_id, period_name) {
    let curr_p_id = $('#period_id_select').val();
    let curr_p_name = $('#period_id_select').find(":selected").text();

    let url = "{{url_for('main.rest_agents_status_count', period_id='PERIOD_ID', any_format='json_hs')}}"
      .replace("PERIOD_ID", period_id);

    $.getJSON(url, function (data) {

      var options = {
        chart: {
          renderTo: 'agents_by_status_chart',
          type: 'pie'
        },
        title: {
          text: 'Charge pour la catégorie'
        },
        subtitle: {
          text: 'subtitle'
        },
        xAxis: {
          title: {
            text: 'Semestre'
          },
          type: 'category',
        },
        yAxis: {
          title: {
            text: 'Charge (ETP)'

          }

        },
        tooltip: {
          pointFormat: '{series.name}: <b>{point.y} ETP </b>'
        },
        series: [],
        plotOptions: {
          column: {
            stacking: 'normal'
          }
        }

      };

      options.series = data;
      var chart = new Highcharts.Chart(options);

    });
  };

  document.addEventListener("DOMContentLoaded", function () {
    let period_id = $(this).find(':selected').val();
    let period_name = $(this).find(':selected').text();
    update_chart(period_id, period_name);
  });

</script>
{% endblock %}