{% 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="perfil()" class="form-control"></select>
        </div>
      </div>
      <div id="respondentes" class="col-md-12 widget blue" style="display:none">
      </div>      
      <div id="profile" class="row">
      </div>
    </div>



{% endblock %}


{% block extra_js %}
<script src="{% static "core/js/psc.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();
        }        
    }

    Highcharts.setOptions({
     colors: ['#357821', '#6acd4c', '#8c8c00', '#d8d800', '#ff4d4d', '#ff0000']
    });
    perfil();
    qtd_respondentes();
  });
</script>
{% endblock %}