{% 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="change_chart_1()" class="form-control"></select>
        </div>
      </div>
      <div class="row">
          <div class="col-xs-4">
            <div id="grade" style="background-color: rgb(67,136,220);color: #fff" class="bt-selector widget" onclick="change_chart_1()">
              <h3>Índices pela nota média</h3>
              <p name="iqp">IQP:<span></span></p>
              <p name="isp">I$P:<span></span></p>
            </div>
          </div>
          <div class="col-xs-4">
            <div id="satisfaction" style="background-color: rgb(119,147,60);color: #fff" class="bt-selector widget" onclick="change_chart_2()">
              <h3>Índices pela % da Satisfação</h3>
              <p name="iqp">ISQP:<span></span></p>
              <p name="isp">IS$P:<span></span></p>
            </div>
          </div>
          <div class="col-xs-4">
            <div id="insatisfaction" style="background-color: rgb(221,78,79);color: #fff" class="bt-selector widget" onclick="change_chart_2()">
              <h3>Índices pela % de Insatisfação</h3>
              <p name="iqp">IIQP:<span></span></p>
              <p name="isp">II$P:<span></span></p>
            </div>
          </div>
      </div>
      <div id="respondentes" class="col-md-12 widget blue" style="display:none">
      </div>  
      <div class="widget blue">
        <div id="chart_1"  style="height:80vh">
        </div>
      </div>
      <div id="compare" style="display:none;margin-top:10px;">
        <div class="widget purple">
            <h2 onClick="hide('compare', 'group-select')" id="compare-projects-title"></h2>
            <hr>
            <h3 onClick="hide('compare', 'group-select')" id="attribute-description"></h3>
            <hr>
            <div class="col-xs-12 col-md-6">
                <div class="widget purple">
                    <div class="content">
                      <div id="projects-compare" class="verticalChart" style="height:200px"></div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-md-6">
                    <div class="widget purple">
                        <div class="content">
                          <div id="market-compare" class="verticalChart"></div>
                        </div>
                    </div>
            </div>
        </div>
      </div>
      <div>
        <div class="widget yellow">
          <div id="fidelity">
          </div>
        </div>
      </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 name_customer = "{{ name_customer|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("name_customer", name_customer);
      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: ['#6f863c', '#a0c55f', '#fca927', '#fa7f77', '#d81f2a']
    });

    iqp();
    isp();
    chart_1("grade", "atributos");
    chart_fidelity();
    qtd_respondentes();
  });
</script>
{% endblock %}