{% extends "enap_designsystem/base.html" %}
{% load static %}
{% load wagtailcore_tags %}
{% load wagtailcore_tags wagtailimages_tags %}

{% block metadata %}
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
{% endblock %}


{% block title %}
    <title>{{ page.title }}</title>
{% endblock %}

{%block govnavbar %}
    <div style="background-color: #071E41;">
        <div class="menu">
            <div class="logo GovBR">
                <img style="width: 51px; height: 18px;" src="{% static 'enap_designsystem/icons/logo-white.png' %}" alt="Logo GovBR" height="40">
            </div>
            <a href="https://www.gov.br/secom/pt-br/acesso-a-informacao/comunicabr">Comunica BR</a>
            <div class="separator"></div>
            <a href="https://www.gov.br/acessoainformacao/pt-br">Acesso à informação</a>
            <div class="separator"></div>
            <a href="https://www.gov.br/pt-br/participacao-social/">Participe</a>
            <div class="separator"></div>
            <a href="https://www4.planalto.gov.br/legislacao/">Legislação</a>
            <div class="separator"></div>
            <a href="https://www.gov.br/pt-br/orgaos-do-governo">Órgãos do Governo</a>
        </div>
    </div>
{% endblock %}


{% block navbar %}
    {% if enap_dynav %}
        {% include "enap_designsystem/blocks/dynamic_nav/dynamic_nav_include.html" %}
    {% elif page.navbar %}
        {% include "enap_designsystem/blocks/navbar/navbar_block.html" with navbar=page.navbar %}
    {% endif %}
{% endblock %}

{% block body_class %}template-gerador-rotas{% endblock %}

{% block extra_css %}
<style>

</style>
{% endblock %}

{% block content %}
<section class="padding-mobile">
{% for block in page.menu %}
    {% include_block block %}
{% endfor %}
{% if page.breadcrumbs %}
    {% include_block page.breadcrumbs %}
{% endif %}
<!-- Skip link para acessibilidade -->
<a href="#content" class="skip-to-content">Pular para o conteúdo principal</a>

<div class="main-layout">
  <!-- Conteúdo principal -->
  <section class="main-content-capsulas center-container" id="content">
    <!-- Formulário de seleção -->
    <div class="gerador-rotas__content">
      <div class="gerador-rotas__header">
        <h2 class="section-heading">Rotas Temáticas</h2>
        <h3 class="gerador-rotas__intro">
          {{ page.texto_introducao|richtext }}
        </h3>

        <h3 class="section-heading-caps">{{ page.pergunta }}</h3>
      </div>
      
      <form method="post" action="." class="gerador-rotas__form">
        {% csrf_token %}
        
        <div class="gerador-rotas__options">
          <!-- Opção 1: Docente Presencial -->
          <div class="rotas-option" tabindex="0">
            <label class="rotas-option__label" for="check-docente">
              <div class="rotas-option__content">
                <input type="radio" id="check-docente" name="rota_selecionada" value="docente_presencial" class="rotas-option__checkbox">
                <div class="rotas-option__icon">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 8l-5-5-5 5M12 3v12"/>
                  </svg>
                </div>
                <div class="rotas-option__text">
                  <p>{{ page.opcao_docente }}</p>
                </div>
              </div>
            </label>
          </div>

          <!-- Opção 2: Designer Instrucional -->
          <div class="rotas-option" tabindex="0">
            <label class="rotas-option__label" for="check-designer">
              <div class="rotas-option__content">
                <input type="radio" id="check-designer" name="rota_selecionada" value="designer_instrucional" class="rotas-option__checkbox">
                <div class="rotas-option__icon">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                    <polyline points="14 2 14 8 20 8"></polyline>
                    <line x1="16" y1="13" x2="8" y2="13"></line>
                    <line x1="16" y1="17" x2="8" y2="17"></line>
                    <polyline points="10 9 9 9 8 9"></polyline>
                  </svg>
                </div>
                <div class="rotas-option__text">
                  <p>{{ page.opcao_designer }}</p>
                </div>
              </div>
            </label>
          </div>

          <!-- Opção 3: Multimídia -->
          <div class="rotas-option" tabindex="0">
            <label class="rotas-option__label" for="check-multimidia">
              <div class="rotas-option__content">
                <input type="radio" id="check-multimidia" name="rota_selecionada" value="multimidia" class="rotas-option__checkbox">
                <div class="rotas-option__icon">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <polygon points="23 7 16 12 23 17 23 7"></polygon>
                    <rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
                  </svg>
                </div>
                <div class="rotas-option__text">
                  <p>{{ page.opcao_multimidia }}</p>
                </div>
              </div>
            </label>
          </div>

          <!-- Opção 4: Equipe Técnica -->
          <div class="rotas-option" tabindex="0">
            <label class="rotas-option__label" for="check-tecnica">
              <div class="rotas-option__content">
                <input type="radio" id="check-tecnica" name="rota_selecionada" value="equipe_tecnica" class="rotas-option__checkbox">
                <div class="rotas-option__icon">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="16 18 22 12 16 6"></polyline>
                    <polyline points="8 6 2 12 8 18"></polyline>
                  </svg>
                </div>
                <div class="rotas-option__text">
                  <p>{{ page.opcao_tecnica }}</p>
                </div>
              </div>
            </label>
          </div>
        </div>
        
        <div class="gerador-rotas__action">
          <button type="submit" id="btn-gerar-rota" class="btn large primary">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="20" height="20">
              <polygon points="3 11 22 2 13 21 11 13 3 11"></polygon>
            </svg>
            {{ page.texto_botao }}
          </button>
        </div>
      </form>
    </div>
  </section>
</div>
{% for block in page.botao %}
    {% include_block block %}
{% endfor %}
{% endblock %}


{% block footer %}
    {% include "enap_designsystem/includes/footer.html" %}
{% endblock %}

{% block extra_js %}
{{ block.super }}
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const radios = document.querySelectorAll('input[type="radio"][name="rota_selecionada"]');

    // Atualizar estado visual de todos os radio buttons
    function updateAllStates() {
      radios.forEach(function(radio) {
        const option = radio.closest('.rotas-option');
        if (radio.checked) {
          option.classList.add('selected');
        } else {
          option.classList.remove('selected');
        }
      });
    }

    // Verificar o estado inicial
    updateAllStates();

    // Evento para cada radio
    radios.forEach(function(radio) {
      radio.addEventListener('change', function() {
        updateAllStates();

        // Anunciar para leitores de tela
        const statusElement = getOrCreateStatusElement();
        const selectedOption = this.closest('.rotas-option').querySelector('.rotas-option__text p').textContent.trim();
        statusElement.textContent = `Opção selecionada: ${selectedOption}`;
        setTimeout(() => { statusElement.textContent = ''; }, 3000);
      });
    });

    // Permitir clicar em qualquer parte da opção para selecioná-la
    document.querySelectorAll('.rotas-option').forEach(function(option) {
      option.addEventListener('click', function(event) {
        if (event.target.type === 'radio' || event.target.closest('label')) return;

        const radio = this.querySelector('input[type="radio"]');
        radio.checked = true;

        const changeEvent = new Event('change', { bubbles: true });
        radio.dispatchEvent(changeEvent);
      });
    });

    // Acessibilidade - permitir seleção via teclado
    document.querySelectorAll('.rotas-option').forEach(function(option) {
      option.addEventListener('keydown', function(e) {
        if (e.key === ' ' || e.key === 'Enter') {
          e.preventDefault();

          const radio = this.querySelector('input[type="radio"]');
          radio.checked = true;

          const changeEvent = new Event('change', { bubbles: true });
          radio.dispatchEvent(changeEvent);
        }
      });
    });

    // Detectar uso de teclado para melhorar acessibilidade visual
    document.addEventListener('keydown', function(e) {
      if (e.key === 'Tab') {
        document.body.classList.add('using-keyboard');
      }
    });

    document.addEventListener('mousedown', function() {
      document.body.classList.remove('using-keyboard');
    });

    // Adiciona efeito hover aos cartões de opção
    document.querySelectorAll('.rotas-option').forEach(function(option) {
      option.addEventListener('mouseenter', function() {
        if (!this.classList.contains('selected')) {
          this.style.transform = 'translateY(-3px)';
          this.style.borderColor = 'var(--color-primary)';
          this.style.boxShadow = 'var(--shadow-md)';
        }
      });

      option.addEventListener('mouseleave', function() {
        if (!this.classList.contains('selected')) {
          this.style.transform = '';
          this.style.borderColor = '';
          this.style.boxShadow = '';
        }
      });
    });

    // Cria ou recupera elemento para anúncios de acessibilidade
    function getOrCreateStatusElement() {
      let statusElement = document.getElementById('a11y-status');

      if (!statusElement) {
        statusElement = document.createElement('div');
        statusElement.id = 'a11y-status';
        statusElement.className = 'visually-hidden';
        statusElement.setAttribute('aria-live', 'polite');
        statusElement.setAttribute('role', 'status');
        document.body.appendChild(statusElement);
      }

      return statusElement;
    }
  });
</script>
</section>
{% endblock %}