{% load css_tags %}{% block_css 'enap_designsystem/blocks/cookies.css' %}
<!-- Banner de Cookies -->
<div class="cookie-banner" id="cookieBanner">
    <div class="cookie-banner-content">
        <div class="cookie-banner-text">
            <h3>O nosso site usa cookies</h3>
            <p>
                Para melhorar a sua experiência na plataforma e prover serviços personalizados, utilizamos cookies.
                <strong>Ao concordar, você terá acesso a todas as funcionalidades do site.</strong>
                Se clicar em "Rejeitar", os cookies que não forem estritamente necessários serão desativados.
                Para escolher quais quer autorizar, clique em "Alterar as minhas preferências".
                Saiba mais em nossa 
                <button class="cookie-link" onclick="openCookieModal()" type="button">
                    Declaração de Cookies
                </button>
            </p>
        </div>
        <div class="cookie-banner-buttons">
            <button class="btn large primary" onclick="acceptAllCookies()">Concordar</button>
            <button class="btn large secondary" onclick="rejectOptionalCookies()">Rejeitar</button>
            <button class="btn-text" onclick="openCookieModal()">Alterar as minhas preferências</button>
        </div>
    </div>
</div>

<!-- Modal de Configurações -->
<div class="cookie-modal" id="cookieModal">
    <div class="modal-content">
        <div class="modal-header">
            <h2 class="modal-title">Configurações avançadas de cookies</h2>
            <button class="modal-close" onclick="closeCookieModal()">&times;</button>
        </div>
        
        <div class="modal-body">
            <div style="margin-bottom: 1.5rem;">
                <h3 style="color: #024248; margin-bottom: 0.5rem;">Ver Declaração de Cookies</h3>
                <p style="font-size: 0.9rem; color: #6b7280;">
                    Para melhorar a sua experiência na plataforma e prover serviços personalizados, utilizamos cookies.
                </p>
            </div>

            <!-- Cookies Essenciais -->
            <div class="cookie-category">
                <div class="category-header">
                    <h4 class="category-title">Cookies estritamente necessários</h4>
                    <div style="display: flex; align-items: center;">
                        <span class="toggle-status">Ativado</span>
                        <label class="toggle-switch">
                            <input type="checkbox" checked disabled>
                            <span class="toggle-slider toggle-disabled"></span>
                        </label>
                    </div>
                </div>
                <p class="category-description">
                    Estes cookies são necessários para o funcionamento básico do site e não podem ser desativados.
                </p>
            </div>

            <!-- Cookies de Funcionalidade -->
            <div class="cookie-category">
                <div class="category-header">
                    <h4 class="category-title">Cookies de funcionalidade</h4>
                    <div style="display: flex; align-items: center;">
                        <span class="toggle-status" id="functionalStatus">Desativado</span>
                        <label class="toggle-switch">
                            <input type="checkbox" id="functionalCookies" onchange="updateToggleStatus('functional')">
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                </div>
                <p class="category-description">
                    Permitem funcionalidades avançadas como lembrar suas preferências de idioma e região.
                </p>
            </div>

            <!-- Cookies de Analytics -->
            <div class="cookie-category">
                <div class="category-header">
                    <h4 class="category-title">Cookies de medição e desempenho</h4>
                    <div style="display: flex; align-items: center;">
                        <span class="toggle-status" id="analyticsStatus">Desativado</span>
                        <label class="toggle-switch">
                            <input type="checkbox" id="analyticsCookies" onchange="updateToggleStatus('analytics')">
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                </div>
                <p class="category-description">
                    Nos ajudam a entender como os visitantes interagem com o site, coletando informações de forma anônima.
                </p>
            </div>

            <!-- Cookies de Marketing -->
            <div class="cookie-category">
                <div class="category-header">
                    <h4 class="category-title">Cookies de segmentação e publicidade</h4>
                    <div style="display: flex; align-items: center;">
                        <span class="toggle-status" id="marketingStatus">Desativado</span>
                        <label class="toggle-switch">
                            <input type="checkbox" id="marketingCookies" onchange="updateToggleStatus('marketing')">
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                </div>
                <p class="category-description">
                    Utilizados para exibir publicidade relevante aos visitantes e medir a eficácia das campanhas.
                </p>
            </div>
        </div>

        <div class="modal-footer">
            <button class="btn secondary" onclick="closeCookieModal()" style="flex: 1;">Cancelar</button>
            <button class="btn primary" onclick="saveCustomPreferences()" style="flex: 1;">Salvar</button>
        </div>
    </div>
</div>


<script>
        // Configuração inicial
    let cookiePreferences = {
        essential: true,
        functional: false,
        analytics: false,
        marketing: false
    };

    // Verificar se já existe consentimento
    function checkCookieConsent() {
        const consent = localStorage.getItem('cookie-consent');
        return consent !== null;
    }

    // Mostrar banner se necessário
    function showCookieBannerIfNeeded() {
        if (!checkCookieConsent()) {
            document.getElementById('cookieBanner').classList.add('show');
        }
    }

    // Esconder banner
    function hideCookieBanner() {
        document.getElementById('cookieBanner').classList.remove('show');
    }

    // Aceitar todos os cookies
    function acceptAllCookies() {
        const allAccepted = {
            essential: true,
            functional: true,
            analytics: true,
            marketing: true,
            timestamp: new Date().toISOString()
        };
        
        localStorage.setItem('cookie-consent', JSON.stringify(allAccepted));
        hideCookieBanner();
        activateCookies(allAccepted);
        
        console.log('Todos os cookies aceitos:', allAccepted);
    }

    // Rejeitar cookies opcionais
    function rejectOptionalCookies() {
        const essentialOnly = {
            essential: true,
            functional: false,
            analytics: false,
            marketing: false,
            timestamp: new Date().toISOString()
        };
        
        localStorage.setItem('cookie-consent', JSON.stringify(essentialOnly));
        hideCookieBanner();
        activateCookies(essentialOnly);
        
        console.log('Apenas cookies essenciais aceitos:', essentialOnly);
    }

    // Abrir modal de configurações
    function openCookieModal() {
        document.getElementById('cookieModal').classList.add('show');
        
        // Carregar preferências existentes se houver
        const existingConsent = localStorage.getItem('cookie-consent');
        if (existingConsent) {
            const preferences = JSON.parse(existingConsent);
            document.getElementById('functionalCookies').checked = preferences.functional;
            document.getElementById('analyticsCookies').checked = preferences.analytics;
            document.getElementById('marketingCookies').checked = preferences.marketing;
            
            updateToggleStatus('functional');
            updateToggleStatus('analytics');
            updateToggleStatus('marketing');
        }
    }

    // Fechar modal
    function closeCookieModal() {
        document.getElementById('cookieModal').classList.remove('show');
    }

    // Atualizar status do toggle
    function updateToggleStatus(type) {
        const checkbox = document.getElementById(type + 'Cookies');
        const status = document.getElementById(type + 'Status');
        
        if (checkbox && status) {
            status.textContent = checkbox.checked ? 'Ativado' : 'Desativado';
            cookiePreferences[type] = checkbox.checked;
        }
    }

    // Salvar preferências customizadas
    function saveCustomPreferences() {
        const customPreferences = {
            essential: true,
            functional: document.getElementById('functionalCookies').checked,
            analytics: document.getElementById('analyticsCookies').checked,
            marketing: document.getElementById('marketingCookies').checked,
            timestamp: new Date().toISOString()
        };
        
        localStorage.setItem('cookie-consent', JSON.stringify(customPreferences));
        hideCookieBanner();
        closeCookieModal();
        activateCookies(customPreferences);
        
        console.log('Preferências personalizadas salvas:', customPreferences);
    }

    // Ativar cookies baseado nas preferências
    function activateCookies(preferences) {
        console.log('Ativando cookies:', preferences);
        
        // Aqui você implementa a lógica específica para cada tipo de cookie
        
        if (preferences.functional) {
            console.log('🔧 Cookies funcionais ativados');
            // Exemplo: localStorage para preferências de idioma
        }
        
        if (preferences.analytics) {
            console.log('📊 Cookies de analytics ativados');
            // Exemplo: Ativar Google Analytics
            // gtag('config', 'GA_MEASUREMENT_ID');
        }
        
        if (preferences.marketing) {
            console.log('📢 Cookies de marketing ativados');
            // Exemplo: Ativar pixels de conversão
        }
    }

    // Fechar modal ao clicar fora
    document.addEventListener('DOMContentLoaded', function() {
        const modal = document.getElementById('cookieModal');
        if (modal) {
            modal.addEventListener('click', function(e) {
                if (e.target === this) {
                    closeCookieModal();
                }
            });
        }
        
        // Mostrar banner se necessário
        showCookieBannerIfNeeded();
    });
</script>