{% extends "enap_designsystem/base.html" %}
{% load static %}
{% load css_tags %}
{% load wagtailcore_tags wagtailimages_tags %}
{% load wagtailcore_tags %}
{% block extra_css %}{% block_css 'enap_designsystem/blocks/capsulas.css' %}{% endblock %}
{% block metadata %}
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* Checkbox estilizado para os filtros da página de cápsulas */
        #filtroSidebar .checkbox-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 4px 0;
            cursor: pointer;
        }

        #filtroSidebar .checkbox-item input[type="checkbox"] {
            appearance: none;
            -webkit-appearance: none;
            width: 18px;
            height: 18px;
            border: 2px solid #AFBACC;
            border-radius: 4px;
            background-color: white;
            cursor: pointer;
            flex-shrink: 0;
            transition: border-color 0.2s, background-color 0.2s;
            position: relative;
            opacity: 1;
        }

        #filtroSidebar .checkbox-item input[type="checkbox"]:checked {
            background-color: #007D7A;
            border-color: #025257;
        }

        #filtroSidebar .checkbox-item input[type="checkbox"]:checked::after {
            content: '';
            position: absolute;
            left: 4px;
            top: 1px;
            width: 6px;
            height: 10px;
            border: 2px solid white;
            border-top: none;
            border-left: none;
            transform: rotate(45deg);
        }

        #filtroSidebar .checkbox-item input[type="checkbox"]:hover {
            border-color: #007D7A;
        }

        #filtroSidebar .checkbox-item label {
            cursor: pointer;
            font-size: 14px;
            color: #434A54;
            line-height: 1.4;
        }

        #filtroSidebar .checkbox-item input[type="checkbox"]:checked + label {
            color: #025257;
            font-weight: 600;
        }

    </style>
{% endblock %}

{% block title %}
    <title>{{ page.title }}</title>
{% 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 content %}
<section class="padding-mobile-3">

<div>
    {% include_block page.menu %}
</div>

<div class="hearder-search_cap">
    {% include_block page.breadcrumbs %}
    <div class="space-header_cap">
        <div class="space-header_cap-div">
            <h2 class="h2-blue-large">Cápsulas de Acessibilidade</h2>
            <p class="p-busca">As Cápsulas de Acessibilidade são unidades rápidas de aprendizagem que organizam, de forma didática, orientações sobre os principais padrões e boas práticas de acessibilidade.</p>
        </div>
    </div>
</div>

<!-- Container de Conteúdo Principal -->
<div class="section_cap">
    <div style="border-bottom: 1px solid #AFBACC; max-width: 1142px; margin: auto;"></div>
    <div class="acess-results-count_cap" id="acess-results-count">
        {{ total_resultados }} cápsulas encontradas
    </div>
<div class="acess-content">

    <!-- Barra superior: limpar filtros + contagem -->
    <div class="srv-filter-content_cards">
        <div class="filtro-btn-group">
            <button type="button" class="filtro-limpar" id="acess-clear-all-btn" style="display: none;" onclick="limparTodosFiltros()">
                <i style="text-decoration: none; font-size: 20px;" class="fa-solid fa-xmark"></i>
                <span style="text-decoration: underline;">Limpar Filtros</span>
            </button>
        </div>
        
    </div>

    <!-- Filtros ativos -->
    <div class="acess-active-filters-wrap" style="display: none;" id="acess-active-filters-wrap">
        <div class="acess-active-filters" id="acess-active-filters">
            <!-- Tags de filtros ativos via JavaScript -->
        </div>
    </div>

    <!-- Wrapper: sidebar de filtros + grid de cards -->
    <div class="filtro-wrapper filtro-aberto" id="filtroWrapper" style="max-width: unset;">

        <!-- Sidebar de Filtros -->
        <div class="filtro-sidebar" id="filtroSidebar">

            <!-- Perfil Profissional -->
            <div class="dropdown-filter">
                <button type="button" class="dropdown-header" onclick="toggleDropdown('perfil_profissional')">
                    <span id="perfil_profissional-nome-filtro">Perfil Profissional</span>
                    <div class="contador-e-seta">
                        <span id="perfil_profissional-count" class="filter-count"></span>
                        <i class="dropdown-arrow fa-solid fa-caret-down"></i>
                    </div>
                </button>
                <div class="dropdown-checkbox-area" id="perfil_profissional-dropdown">
                    <div class="checkbox-container">
                        {% for value, label in opcoes_filtros.perfis_profissionais %}
                            <div class="checkbox-item">
                                <input type="checkbox"
                                       name="perfil_profissional"
                                       id="perfil_{{ value }}"
                                       value="{{ value }}"
                                       class="acess-checkbox"
                                       data-filtro-tipo="perfil_profissional"
                                       {% if value in filtros_ativos.perfil_profissional %}checked{% endif %}>
                                <label for="perfil_{{ value }}">{{ label }}</label>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>

            <!-- Tipo de Deficiência -->
            <div class="dropdown-filter">
                <button type="button" class="dropdown-header" onclick="toggleDropdown('tipo_deficiencia')">
                    <span id="tipo_deficiencia-nome-filtro">Tipo de Barreira</span>
                    <div class="contador-e-seta">
                        <span id="tipo_deficiencia-count" class="filter-count"></span>
                        <i class="dropdown-arrow fa-solid fa-caret-down"></i>
                    </div>
                </button>
                <div class="dropdown-checkbox-area" id="tipo_deficiencia-dropdown">
                    <div class="checkbox-container">
                        {% for value, label in opcoes_filtros.tipos_deficiencia %}
                            <div class="checkbox-item">
                                <input type="checkbox"
                                       name="tipo_deficiencia"
                                       id="tipo_{{ value }}"
                                       value="{{ value }}"
                                       class="acess-checkbox"
                                       data-filtro-tipo="tipo_deficiencia"
                                       {% if value in filtros_ativos.tipo_deficiencia %}checked{% endif %}>
                                <label for="tipo_{{ value }}">{{ label }}</label>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>

            <!-- Formato de Ação -->
            <div class="dropdown-filter">
                <button type="button" class="dropdown-header" onclick="toggleDropdown('formato_acao')">
                    <span id="formato_acao-nome-filtro">Formato de Ação</span>
                    <div class="contador-e-seta">
                        <span id="formato_acao-count" class="filter-count"></span>
                        <i class="dropdown-arrow fa-solid fa-caret-down"></i>
                    </div>
                </button>
                <div class="dropdown-checkbox-area" id="formato_acao-dropdown">
                    <div class="checkbox-container">
                        {% for value, label in opcoes_filtros.formatos_acao %}
                            <div class="checkbox-item">
                                <input type="checkbox"
                                       name="formato_acao"
                                       id="formato_{{ value }}"
                                       value="{{ value }}"
                                       class="acess-checkbox"
                                       data-filtro-tipo="formato_acao"
                                       {% if value in filtros_ativos.formato_acao %}checked{% endif %}>
                                <label for="formato_{{ value }}">{{ label }}</label>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>

            <!-- Tipo de Recurso -->
            <div class="dropdown-filter">
                <button type="button" class="dropdown-header" onclick="toggleDropdown('tipo_recurso')">
                    <span id="tipo_recurso-nome-filtro">Tipo de Recurso</span>
                    <div class="contador-e-seta">
                        <span id="tipo_recurso-count" class="filter-count"></span>
                        <i class="dropdown-arrow fa-solid fa-caret-down"></i>
                    </div>
                </button>
                <div class="dropdown-checkbox-area" id="tipo_recurso-dropdown">
                    <div class="checkbox-container">
                        {% for value, label in opcoes_filtros.tipos_recurso %}
                            <div class="checkbox-item">
                                <input type="checkbox"
                                       name="tipo_recurso"
                                       id="recurso_{{ value }}"
                                       value="{{ value }}"
                                       class="acess-checkbox"
                                       data-filtro-tipo="tipo_recurso"
                                       {% if value in filtros_ativos.tipo_recurso %}checked{% endif %}>
                                <label for="recurso_{{ value }}">{{ label }}</label>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>

        </div>
        <!-- fim filtro-sidebar -->

        <!-- Área de Cards -->
        <div style="flex: 1; min-width: 0;">

            <!-- Grid de cápsulas -->
            <ul style="list-style: none; margin: 0; padding: 0;" class="acess-grid" id="acess-results-grid">
                {% for capsula in capsulas %}
                <li style="padding: 0;" class="acess-capsula-link">
                    <a href="{% pageurl capsula %}">
                        <div class="acess-capsula-card"
                            data-tipo-deficiencia="{{ capsula.tipos_deficiencia|join:' ' }}"
                            data-formato-acao="{{ capsula.formatos_acao|join:' ' }}"
                            data-tipo-recurso="{{ capsula.tipos_recurso|join:' ' }}"
                            data-perfil-profissional="{{ capsula.perfis_profissionais|join:' ' }}"
                            data-prioridade="{{ capsula.prioridade }}">

                            <div class="acess-capsula-content">
                                <div class="acess-capsula-icon">
                                    <i class="icon-class {{ capsula.icone }}"></i>
                                </div>

                                <h2 class="acess-capsula-titulo">
                                    {{ capsula.title }}
                                </h2>
                                <p class="acess-capsula-descricao">
                                    {{ capsula.resumo_card|default:"Aprenda sobre este importante aspecto da acessibilidade digital." }}
                                </p>
                            </div>

                            <!-- Tipos de recursos como chips -->
                            {% if capsula.tipos_recurso %}
                            <div class="acess-capsula-recursos">
                                {% for recurso_value, recurso_label in opcoes_filtros.tipos_recurso %}
                                    {% if recurso_value in capsula.tipos_recurso %}
                                        <div class="acess-recurso-tag">
                                            {% if recurso_value == 'imagem' %}
                                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                                                    <circle cx="8.5" cy="8.5" r="1.5"></circle>
                                                    <polyline points="21 15 16 10 5 21"></polyline>
                                                </svg>
                                            {% elif recurso_value == 'video' %}
                                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" 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>
                                            {% elif recurso_value == 'grafico' %}
                                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                    <line x1="18" y1="20" x2="18" y2="10"></line>
                                                    <line x1="12" y1="20" x2="12" y2="4"></line>
                                                    <line x1="6" y1="20" x2="6" y2="14"></line>
                                                </svg>
                                            {% elif recurso_value == 'tabela' %}
                                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                                                    <line x1="3" y1="9" x2="21" y2="9"></line>
                                                    <line x1="3" y1="15" x2="21" y2="15"></line>
                                                    <line x1="9" y1="3" x2="9" y2="21"></line>
                                                    <line x1="15" y1="3" x2="15" y2="21"></line>
                                                </svg>
                                            {% else %}
                                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                    <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
                                                    <polyline points="13 2 13 9 20 9"></polyline>
                                                </svg>
                                            {% endif %}
                                            {{ recurso_label }}
                                        </div>
                                    {% endif %}
                                {% endfor %}
                            </div>
                            {% endif %}
                            <div class="btn primary large">
                                Acessar Cápsula {{ forloop.counter }}
                            </div>
                        </div>
                    </a>
                </li>
                {% endfor %}
            </ul>

            <!-- Mensagem para nenhum resultado -->
            <div id="acess-empty-message" class="acess-empty" style="display: none;">
                <svg class="acess-empty-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <h2>Nenhuma cápsula encontrada</h2>
                <p>Tente ajustar os filtros ou <a href="javascript:void(0)" id="acess-clear-filters-link">limpe os filtros</a> para ver todas as cápsulas.</p>
            </div>

        </div>
        <!-- fim área de cards -->

    </div>
    <!-- fim filtro-wrapper -->

</div>
<!-- fim acess-content -->
</div>
<section>
    {% include_block page.cards %}
</section>
{% endblock %}

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

{% block scriptinline %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Mapeamento de filtros para labels
    const filtroLabels = {
        {% for tipo, opcoes in opcoes_filtros.items %}
            '{{ tipo }}': {
                {% for value, label in opcoes %}
                    '{{ value }}': '{{ label }}',
                {% endfor %}
            },
        {% endfor %}
    };

    // Cache de elementos DOM
    const checkboxes = document.querySelectorAll('.acess-checkbox');
    const capsulaCards = document.querySelectorAll('.acess-capsula-card');
    const contagemResultados = document.getElementById('acess-results-count');
    const mensagemVazia = document.getElementById('acess-empty-message');
    const filtrosAtivosContainer = document.getElementById('acess-active-filters');
    const filtrosAtivosWrapper = document.getElementById('acess-active-filters-wrap');
    const limparFiltrosLink = document.getElementById('acess-clear-filters-link');

    // Toggle dropdown individual — NÃO fecha ao marcar checkbox
    window.toggleDropdown = function(dropdownId) {
        const dropdown = document.getElementById(dropdownId + '-dropdown');
        if (!dropdown) return;
        const header = dropdown.previousElementSibling;

        dropdown.classList.toggle('open');
        header.classList.toggle('active');

        const cbs = dropdown.querySelectorAll('input[type="checkbox"]');
        if (dropdown.classList.contains('open')) {
            cbs.forEach(cb => cb.setAttribute('tabindex', '0'));
        } else {
            cbs.forEach(cb => cb.setAttribute('tabindex', '-1'));
        }
    };

    // Adicionar eventos aos checkboxes — apenas filtra, não fecha dropdown
    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            aplicarFiltros();
            atualizarFiltrosAtivos();
            atualizarURL();
        });
    });

    // Evento para limpar todos os filtros
    const limparTodosBtn = document.getElementById('acess-clear-all-btn');
    if (limparTodosBtn) {
        limparTodosBtn.addEventListener('click', limparTodosFiltros);
    }
    if (limparFiltrosLink) {
        limparFiltrosLink.addEventListener('click', limparTodosFiltros);
    }

    // Aplicar filtros client-side
    function aplicarFiltros() {
        const filtrosAtivos = {
            tipo_deficiencia: [],
            formato_acao: [],
            tipo_recurso: [],
            perfil_profissional: []
        };

        checkboxes.forEach(checkbox => {
            if (checkbox.checked) {
                const tipoFiltro = checkbox.getAttribute('data-filtro-tipo');
                if (filtrosAtivos[tipoFiltro]) {
                    filtrosAtivos[tipoFiltro].push(checkbox.value);
                }
            }
        });

        atualizarContadoresDropdown(filtrosAtivos);

        let capsulasFiltradas = 0;

        capsulaCards.forEach(card => {
            let mostrar = true;

            if (filtrosAtivos.tipo_deficiencia.length > 0) {
                const tiposDeficiencia = (card.getAttribute('data-tipo-deficiencia') || '').split(' ').filter(t => t);
                if (!filtrosAtivos.tipo_deficiencia.some(tipo => tiposDeficiencia.includes(tipo))) {
                    mostrar = false;
                }
            }

            if (mostrar && filtrosAtivos.formato_acao.length > 0) {
                const formatosAcao = (card.getAttribute('data-formato-acao') || '').split(' ').filter(t => t);
                if (!filtrosAtivos.formato_acao.some(formato => formatosAcao.includes(formato))) {
                    mostrar = false;
                }
            }

            if (mostrar && filtrosAtivos.tipo_recurso.length > 0) {
                const tiposRecurso = (card.getAttribute('data-tipo-recurso') || '').split(' ').filter(t => t);
                if (!filtrosAtivos.tipo_recurso.some(recurso => tiposRecurso.includes(recurso))) {
                    mostrar = false;
                }
            }

            if (mostrar && filtrosAtivos.perfil_profissional.length > 0) {
                const perfis = (card.getAttribute('data-perfil-profissional') || '').split(' ').filter(t => t);
                if (!filtrosAtivos.perfil_profissional.some(perfil => perfis.includes(perfil))) {
                    mostrar = false;
                }
            }

            const parent = card.closest('.acess-capsula-link');
            if (parent) {
                parent.style.display = mostrar ? 'block' : 'none';
                if (mostrar) capsulasFiltradas++;
            }
        });

        if (contagemResultados) {
            contagemResultados.textContent = capsulasFiltradas + ' cápsulas encontradas';
        }

        if (mensagemVazia) {
            mensagemVazia.style.display = capsulasFiltradas === 0 ? 'block' : 'none';
        }
    }

    // Atualizar contadores nos botões de dropdown da sidebar
    function atualizarContadoresDropdown(filtrosAtivos) {
        const grupos = {
            'perfil_profissional': filtrosAtivos.perfil_profissional.length,
            'tipo_deficiencia': filtrosAtivos.tipo_deficiencia.length,
            'formato_acao': filtrosAtivos.formato_acao.length,
            'tipo_recurso': filtrosAtivos.tipo_recurso.length
        };

        let total = 0;
        Object.keys(grupos).forEach(grupo => {
            const count = grupos[grupo];
            total += count;

            const countEl = document.getElementById(grupo + '-count');
            const nameEl = document.getElementById(grupo + '-nome-filtro');

            if (countEl) countEl.textContent = count > 0 ? count : '';
            if (nameEl) nameEl.style.fontWeight = count > 0 ? '700' : '600';
        });

        // Mostrar/ocultar botão limpar
        const limparBtn = document.getElementById('acess-clear-all-btn');
        if (limparBtn) {
            limparBtn.style.display = total > 0 ? 'flex' : 'none';
        }
    }

    // Atualizar a exibição de filtros ativos (tags)
    function atualizarFiltrosAtivos() {
        if (!filtrosAtivosContainer) return;

        filtrosAtivosContainer.innerHTML = '';

        let temFiltrosAtivos = false;

        ['tipo_deficiencia', 'formato_acao', 'tipo_recurso', 'perfil_profissional'].forEach(tipoFiltro => {
            const checkboxesTipo = document.querySelectorAll(`.acess-checkbox[data-filtro-tipo="${tipoFiltro}"]:checked`);

            checkboxesTipo.forEach(checkbox => {
                temFiltrosAtivos = true;

                const tipoNormalizado = tipoFiltro.replace('_', 's_');
                const valorCheckbox = checkbox.value;
                const labelTexto = filtroLabels[tipoNormalizado] && filtroLabels[tipoNormalizado][valorCheckbox]
                    ? filtroLabels[tipoNormalizado][valorCheckbox]
                    : valorCheckbox;

                const tagFiltro = document.createElement('div');
                tagFiltro.className = 'acess-filter-tag';
                tagFiltro.innerHTML = `
                    ${labelTexto}
                    <button type="button" class="acess-remove-btn" data-tipo="${tipoFiltro}" data-valor="${valorCheckbox}">
                        <i class="fas fa-times"></i>
                    </button>
                `;

                filtrosAtivosContainer.appendChild(tagFiltro);
            });
        });

        if (filtrosAtivosWrapper) {
            filtrosAtivosWrapper.style.display = temFiltrosAtivos ? 'flex' : 'none';
        }

        document.querySelectorAll('.acess-remove-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const tipo = this.getAttribute('data-tipo');
                const valor = this.getAttribute('data-valor');
                removerFiltro(tipo, valor);
            });
        });
    }

    // Atualizar URL com os filtros selecionados
    function atualizarURL() {
        const urlParams = new URLSearchParams();

        checkboxes.forEach(checkbox => {
            if (checkbox.checked) {
                urlParams.append(checkbox.getAttribute('data-filtro-tipo'), checkbox.value);
            }
        });

        const newUrl = window.location.pathname + (urlParams.toString() ? '?' + urlParams.toString() : '');
        history.pushState(null, '', newUrl);
    }

    // Remover um filtro específico
    function removerFiltro(tipo, valor) {
        const checkbox = document.querySelector(`input[data-filtro-tipo="${tipo}"][value="${valor}"]`);
        if (checkbox) {
            checkbox.checked = false;
            aplicarFiltros();
            atualizarFiltrosAtivos();
            atualizarURL();
        }
    }

    // Limpar todos os filtros
    function limparTodosFiltros() {
        checkboxes.forEach(checkbox => {
            checkbox.checked = false;
        });

        aplicarFiltros();
        atualizarFiltrosAtivos();
        atualizarURL();
    }

    // Tornar limparTodosFiltros acessível globalmente (para o onclick inline)
    window.limparTodosFiltros = limparTodosFiltros;

    // Inicializar a partir dos parâmetros da URL
    const urlParams = new URLSearchParams(window.location.search);
    let temParametros = false;

    for (const [key, value] of urlParams.entries()) {
        const checkbox = document.querySelector(`input[data-filtro-tipo="${key}"][value="${value}"]`);
        if (checkbox) {
            checkbox.checked = true;
            temParametros = true;
        }
    }

    aplicarFiltros();
    if (temParametros) {
        atualizarFiltrosAtivos();
    }
});
</script>
</section>
{% endblock %}