{% extends 'polls/base.html' %}
{% block title %}{% endblock %}

{% block content %}

{% if prova.questao_set.all %}
        <h2>Questões do {{prova.tipoProva}} {{prova.anoProva}}</h2>
        <ul id="questoes">
        {% for questao in prova.questao_set.all %}
          <hr id="linha" />
          {% if questao.statusQuestao == '1' %}
          <h3>Questão <a href="{{questao.idQuestao}}">{{questao.idQuestao}}</a> {% for categoria in questao.categoria.all %}
                        {{categoria.idCategoria}}
                      {% endfor %}</h3>
          {% if questao.textoQuestao is not None %}
            <p>{{questao.textoQuestao}}</p>
          {% endif %}
          {% if questao.imagemQuestao %}
             <div class="col-xs-15" align="center">
                <img class="img-responsive" id="img1" src="/{{questao.imagemQuestao}}">
                <br>
            </div>
          {% endif %}
          {% if  questao.imagem2Questao %}
            <div class="col-xs-15" align="center">
                <img class="img-responsive" id="img2" src="/{{questao.imagem2Questao}}">
                <br>
            </div>
          {% endif %}
          {% if questao.perguntaQuestao is not None %}
            <p>{{questao.perguntaQuestao}}</p>
          {% endif %}
          {% if prova.questao_set.all %}
            <ul>
            {% for opcao in questao.opcao_set.all %}
              {% if questao.tipoQuestao == '2' %}

                <form action="" id="opcoes">
                    <script>

                    function mostrarSel(){
                      x = "{% for questao in prova.questao_set.all %}{% for resposta in questao.resposta_set.all %}{{resposta.resposta|safe}}{% endfor %}{% endfor %}";
                      alert(x);

                     }
                     function getRadioValor(name){
                      var rads = document.getElementsByName(name);
                      for(var i = 0; i < rads.length; i++){
                       if(rads[i].checked){
                        return rads[i].value;
                       }
                      }

                      return null;
                     }
                    </script>

                    <input type="radio" name="opcao_escolhida" value="A"><label for='{{opcao.aOpcao}}'>a) {{opcao.aOpcao}}</label><br>
                    <input type="radio" name="opcao_escolhida" value="B"><label for='{{opcao.bOpcao}}'>b) {{opcao.bOpcao}}</label><br>
                    <input type="radio" name="opcao_escolhida" value="C"><label for='{{opcao.cOpcao}}'>c) {{opcao.cOpcao}}</label><br>
                    <input type="radio" name="opcao_escolhida" value="D"><label for='{{opcao.dOpcao}}'>d) {{opcao.dOpcao}}</label><br>
                    <input type="radio" name="opcao_escolhida" value="E"><label for='{{opcao.eOpcao}}'>e) {{opcao.eOpcao}}</label><br>
                    {% for resposta in questao.resposta_set.all %}
                      <input style="display: none;" id="resposta_questao" name="resposta_questao" value='{{resposta.resposta}}'>
                    {% endfor %}
                    <button class="btn btn-primary" onclick='mostrarSel()'> Mostra valor </button>
                    <button type="button" class="btn btn-primary" onclick="Mudarestado('minhaDiv')">Mostrar gabarito</button>
                    <script type="text/javascript">
                      function Mudarestado(el) {
                        var display = document.getElementById(el).style.display;
                        if(display == "none")
                          document.getElementById(el).style.display = 'block';
                        else
                          document.getElementById(el).style.display = 'none';
                      }
                    </script>
                    <div id="minhaDiv" style="display: none;">Resposta:
                      {% for resposta in questao.resposta_set.all %}
                        {{resposta.resposta}}
                      {% endfor %}
                    </div>
              </form>

              {% elif questao.tipoQuestao == '1' %}
              <form id="opcoes">
                {% if opcao.aOpcao %}
                  <p>a) {{opcao.aOpcao}}</p><br>
                {% endif %}
                {% if opcao.bOpcao %}
                  <p>b) {{opcao.bOpcao}}</p><br>
                {% endif %}
                {% if opcao.cOpcao %}
                  <p>c) {{opcao.cOpcao}}</p><br>
                  </form>
                {% endif %}
                {% if opcao.dOpcao %}
                  <p>d) {{opcao.dOpcao}}</p><br>
                {% endif %}
                {% if opcao.eOpcao %}
                  <p>e) {{opcao.eOpcao}}</p><br>
              </form>
                {% else %}
                {% endif %}
              {% endif %}
            {% endfor %}
        </ul>
      {% endif %}
      {% else %}
        <p>Questão {{questao.idQuestao}} indisponível</p>
      {% endif %}
    {% endfor %}
    </ul>
  {% else %}
    <p>Não há questões nessa prova</p>
        {% endif %}
















{% if is_paginated %}
  <ul class="pagination">
    {% if page_obj.has_previous %}
      <li><a href="?page={{ page_obj.previous_page_number }}">&laquo;</a></li>
    {% else %}
      <li class="disabled"><span>&laquo;</span></li>
    {% endif %}
    {% for i in paginator.page_range %}
      {% if page_obj.number == i %}
        <li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
      {% else %}
        <li><a href="?page={{ i }}">{{ i }}</a></li>
      {% endif %}
    {% endfor %}
    {% if page_obj.has_next %}
      <li><a href="?page={{ page_obj.next_page_number }}">&raquo;</a></li>
    {% else %}
      <li class="disabled"><span>&raquo;</span></li>
    {% endif %}
  </ul>
{% endif %}
</script>
{% endblock %}