{% extends "enap_designsystem/base.html" %}
{% load static %}
{% 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 page.navbar %}
        {% include "enap_designsystem/blocks/navbar/navbar_block.html" with navbar=page.navbar %}
    {% else %}
        <p style="color: red;">DEBUG: Nenhuma Navbar foi definida.</p>
    {% endif %}
{% endblock %}

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

{% block extra_css %}
<style>

</style>
{% endblock %}

{% block content %}
<!-- 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 -->
  <main class="main-content-capsulas center-container" id="content">
    <!-- Formulário de seleção -->
    <div class="gerador-rotas__content">
      <div class="gerador-rotas__header">
        <h1>{{ page.title }}</h1>
        <div class="gerador-rotas__intro">
          {{ page.texto_introducao|richtext }}
        </div>
        <h2 class="section-heading">{{ page.pergunta }}</h2>
      </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="radio-docente">
              <input type="radio" id="radio-docente" name="rota_selecionada" value="docente_presencial" class="rotas-option__radio" required>
              <div class="rotas-option__content">
                <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="radio-designer">
              <input type="radio" id="radio-designer" name="rota_selecionada" value="designer_instrucional" class="rotas-option__radio">
              <div class="rotas-option__content">
                <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="radio-multimidia">
              <input type="radio" id="radio-multimidia" name="rota_selecionada" value="multimidia" class="rotas-option__radio">
              <div class="rotas-option__content">
                <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="radio-tecnica">
              <input type="radio" id="radio-tecnica" name="rota_selecionada" value="equipe_tecnica" class="rotas-option__radio">
              <div class="rotas-option__content">
                <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>
  </main>
</div>

<!-- Elemento para anúncios de acessibilidade -->
<div id="a11y-status" class="visually-hidden" aria-live="polite" role="status"></div>
{% endblock %}

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

{% block extra_js %}
{{ block.super }}
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Elementos do formulário
    const form = document.querySelector('.gerador-rotas__form');
    const radioButtons = document.querySelectorAll('input[type="radio"][name="rota_selecionada"]');
    const submitButton = document.getElementById('btn-gerar-rota');
    const routeOptions = document.querySelectorAll('.rotas-option');
    
    // Verificar o estado inicial das opções e marcar como selecionada
    radioButtons.forEach(function(radio) {
      if (radio.checked) {
        radio.closest('.rotas-option').classList.add('selected');
      }
    });
    
    // Ativar o botão quando uma opção for selecionada e atualizar classe
    radioButtons.forEach(function(radio) {
      radio.addEventListener('change', function() {
        // Remover a classe selecionada de todas as opções
        routeOptions.forEach(option => {
          option.classList.remove('selected');
        });
        
        // Adicionar a classe selecionada à opção atual
        this.closest('.rotas-option').classList.add('selected');
        
        // 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}`;
        
        // Limpa o anúncio após a leitura
        setTimeout(() => {
          statusElement.textContent = '';
        }, 3000);
      });
    });
    
    // Permitir clicar em qualquer parte da opção para selecioná-la
    routeOptions.forEach(function(option) {
      option.addEventListener('click', function(event) {
        // Evita propagação se o clique foi diretamente no radio button
        if (event.target.type === 'radio') return;
        
        // Remover a classe selecionada de todas as opções
        routeOptions.forEach(opt => {
          opt.classList.remove('selected');
        });
        
        // Adicionar a classe selecionada à opção atual
        this.classList.add('selected');
        
        // Selecionar o radio button
        const radio = this.querySelector('input[type="radio"]');
        radio.checked = true;
        
        // Disparar o evento change manualmente
        const changeEvent = new Event('change', { bubbles: true });
        radio.dispatchEvent(changeEvent);
      });
    });
    
    // Acessibilidade - permitir seleção via teclado
    routeOptions.forEach(function(option) {
      option.addEventListener('keydown', function(e) {
        // Selecionar com espaço ou enter
        if (e.key === ' ' || e.key === 'Enter') {
          e.preventDefault();
          
          // Remover a classe selecionada de todas as opções
          routeOptions.forEach(opt => {
            opt.classList.remove('selected');
          });
          
          // Adicionar a classe selecionada à opção atual
          this.classList.add('selected');
          
          // Selecionar o radio button
          const radio = this.querySelector('input[type="radio"]');
          radio.checked = true;
          
          // Disparar o evento change
          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
    routeOptions.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>
{% endblock %}