{% extends "base.html" %}
{% load i18n staticfiles coretags %}

{% block main %}

    <div class="row">
      <div class="control-group">
        <div class="controls">
          <label for="group-select">Selecione o Segmento:</label>
          <select id="group-select" onchange="func_histograma('atributo')" class="form-control"></select>
        </div>          
      </div>
      <div id="respondentes" class="col-md-12 widget blue" style="display:none">
      </div>      
      <div class="col-md-12 widget blue">
        <div id="histograma"  style="height:80vh">
        </div>
      </div>
    </div>
    <div id="comparativos" style="margin-top:10px;" class="row">
      <div class="widget purple">
          <h3 id="nome-atributo">Nome</h3>
          <hr>
          <div class="col-xs-12 col-md-6">
                  <div class="widget purple">
                      <h2><span><i class="fa fa-line-chart"></i></span>Evolução</h2>
                      <hr>
                      <div class="content">
                        <div id="comparativo-projetos" class="verticalChart" style="height:200px"></div>
                      </div>
                  </div>
          </div>
          <div class="col-xs-12 col-md-6">
                  <div class="widget purple">
                      <h2><span><i class="fa fa-eye"></i></span>Comparativo</h2>
                      <hr>
                      <div class="content">
                        <div id="comparativo-mercado" class="verticalChart"></div>
                      </div>
                  </div>
          </div>
      </div>
    </div>
    <div style="margin-top: 10px;" class="row">
        <div class="col-md-3 col-xs-6">
          <div class="statbox blue">
              <div id="ico" class="number"></div>
              <div id="ico_text" class="footer">Índice do Clima Organizacional</div>
          </div>
        </div>

        <div class="col-md-3 col-xs-6">
          <div class="statbox blue">
              <div id="ico_comparativo" class="number"></div>
              <div id="ico_comparativo_text" class="footer">Índice do Clima Organizacional</div>
          </div>
        </div>

        <div class="col-md-3 col-xs-6">
          <div class="statbox orange">
              <div id="ifc" class="number"></div>
              <div id="ifc_text" class="footer">Índice de Fidelidade do Colaborador</div>
          </div>
        </div>

        <div class="col-md-3 col-xs-6">
          <div class="statbox orange">
              <div id="ifc_comparativo" class="number"></div>
              <div id="ifc_comparativo_text" class="footer">Índice de Fidelidade do Colaborador</div>
          </div>
        </div>
    </div>
    <div style="margin-top: 10px;" class="row">
        <div class="col-md-6 col-xs-12">        
            <div class="sparkLineStats widget grey">
              <h2><span><i class="fa fa-list-ul"></i></span>Questões de Satisfação Geral <span2> - (% de favorabilidade)</span2></h2>
              <hr>
              <ul id="fidelidade" class="list-group">
                
              </ul>
            </div>        
        </div>
        <div class="col-md-6 col-xs-12">
            <div class="sparkLineStats widget grey">
              <h2><span><i class="fa fa-list-ul"></i></span> Nível de Fidelidade dos Colaboradores</h2>
              <hr>            
              <ul id="primes" class="list-group">
                
              </ul>
            </div>
        </div>
    </div>



{% endblock %}


{% block extra_js %}
<script src="{% static "core/js/pco.js" %}"></script>
<script type="text/javascript">

  $(function(){
    var erro = "{{erro|escapejs}}";
    if (erro=="True") {
      var erro_text = "{{erro_text|escapejs}}";
      alert(erro_text)
      document.location.href="/";
      return
    }
    else {
      var date = "{{ date|escapejs }}";
      var segments = "{{ segments|escapejs }}";
      var visualization = "{{visualization|escapejs}}";
      var attributes = "{{ attributes|escapejs }}";
      var results = "{{ results|escapejs }}";
      var profile = "{{ profile|escapejs }}";
      var user = "{{ request.user.username|escapejs }}";

      sessionStorage.setItem("date", date);
      sessionStorage.setItem("segments", segments);
      sessionStorage.setItem("attributes", attributes);
      sessionStorage.setItem("results", results);
      sessionStorage.setItem("profile", profile);
      sessionStorage.setItem("visualization", visualization);
    }

    visualization = $.parseJSON(visualization);
    segments = $.parseJSON(sessionStorage.getItem("segments"));
    for (var i = 0; i < visualization.length; i++) {
        value = segments[visualization[i]]['color']
        var color = 'background-color:' + 'rgb(' + value[0].toString() + ',' + value[1].toString() + ',' + value[2].toString() + ')'; // using a css string
        $('#group-select')
          .append($('<option></option>')
         .attr("value",visualization[i])
         .text(segments[visualization[i]]["name"])
         .attr("style",color));
        if (visualization[i]==user) {
          $('#group-select').val(visualization[i]).change();
        }        
    }

    func_histograma("atributo");
  });

  function comparativo_projetos(atributo) {
    $('#comparativos').css("display", "inherit");
    var resultados = jQuery.parseJSON(sessionStorage.getItem("results"));

    data = []
    $.each(resultados, function(key,value) {
      if (value["grades"][$("#group-select option:selected").val()][atributo] != "") {
        data.push({name:key.split("/")[2], y:parseFloat(value["grades"][$("#group-select").val()][atributo])*100})
      };
    });

    $('#comparativo-projetos').highcharts({
      credits: {
        enabled:false,
      },
      chart: {
            type: 'line'
      },
      exporting: {
          enabled:false,
      },
      title: {
        text:'',
      },
      xAxis: {
          type:'category',
          // categories: categorias_demografia(),
          labels: {
              // rotation: 0,
              style: {
                  fontSize: '10px',
                  fontFamily: 'Verdana, sans-serif'
              }
          }
      },
      yAxis: {
          title: {
              text: ''
          },
          labels: {
              enabled:false,
          },
          gridLineWidth: 0,
      },
      legend: {
          enabled: false,
      },
      tooltip: {
          pointFormat: 'Nível de Satisfação: <b>{point.y:.1f}%</b>'
      },
      plotOptions: {
            series: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function () {
                          // comparativo_projetos(this.category)
                          // comparativo_mercado(this.category)
                        }
                    }
                }
            }
      },        
      series: [{
          name: 'Resultado do Segmento',
          data: data,
          colorbypoint:false,
          lineWidth:5,
          color:'#8674A6',
          dataLabels: {
              enabled: true,
              color: '#FFFFFF',
              align: 'right',
              formatter: function() {
                            return Highcharts.numberFormat(this.y, '1',',') +'%';
                        },
              y: 20, // 10 pixels down from the top
              style: {
                  fontSize: '1.5em',
                  fontFamily: 'Verdana, sans-serif'
              }
          }
      }]
    });

  }
  function comparativo_mercado(atributo) {
    var resultados = jQuery.parseJSON(sessionStorage.getItem("results"));
    resultados = resultados[sessionStorage.getItem("date")]["grades"]
    data = []
    $('#comparativo-mercado').empty();
    nota = resultados[$("#group-select").val()][atributo]
    if (nota != "") {
      $('#comparativo-mercado')
        .append($('<div class="singleBar"><div class="bar"><div style="height:' + (nota*100) + '%" class="value"><span>' + (nota*100).toFixed(1).replace(".",",") +'%</span></div></div><div class="title">' + $("#group-select option:selected").text() + '</div></div>'));
    };
    nota = resultados[comparativo($("#group-select").val())][atributo]
      if (nota != "") {
        $('#comparativo-mercado')
          .append($('<div class="singleBar"><div class="bar"><div style="height:' + (nota*100) + '%" class="value"><span>' + (nota*100).toFixed(1).replace(".",",") +'%</span></div></div><div class="title">' + segmento(comparativo($("#group-select option:selected").val())) + '</div></div>'));
      };      
  }  
  function comparativo_data(grupo) {
    var resultados = jQuery.parseJSON(sessionStorage.getItem("results"));
    resultados = resultados[sessionStorage.getItem("date")]["grades"][grupo]

    data = []
    $.each(resultados, function(key, value) {
      if (value == "") {
        data.push({name:key, y:null})
      } else {
        data.push({name:key, y:parseFloat(value)*100})
      }
    });
    return data;
  }    
  function comparativo(grupo) {
    var segments = jQuery.parseJSON(sessionStorage.getItem("segments"));
    return segments[grupo]["comparative"]
  }
  function segmento(indice) {
    var segments = jQuery.parseJSON(sessionStorage.getItem("segments"));
    return segments[indice]["name"]
  }

  function histograma_ico(grupo) {
    if (grupo!=undefined) {
      var resultados = jQuery.parseJSON(sessionStorage.getItem("results"));
      var ico = resultados;

      resultados = resultados[sessionStorage.getItem("date")]["grades"][grupo]
      ico = ico[sessionStorage.getItem("date")]["ico"][grupo];
      attributes = jQuery.parseJSON(sessionStorage.getItem("attributes"))

      data = []
      $.each(resultados, function(key, value) {
          data.push({name:"ICO " + segmento(grupo), color:'#43B5AD', y:parseFloat(ico)*100})
      });
      return data;
    }
    else {
      return 0;
    }
  }
  function floor() {
    var resultados = jQuery.parseJSON(sessionStorage.getItem("results"));

    resultados = resultados[sessionStorage.getItem("date")]["grades"][$("#group-select").val()]

    data = 100
    $.each(resultados, function(key, value) {
      if (parseFloat(value)*100 < data) {
        data = parseFloat(value)*100
      }
    });
    return data;
  }
</script>
{% endblock %}