{% load css_tags %}{% block_css 'enap_designsystem/blocks/carousel_bggreen.css' %}
{% load wagtailcore_tags %}
{% load wagtailimages_tags %}
{% load static %}

{% block content %}

<div class="enap-carousel-container" data-carousel-id="{{ block.id|default:'default' }}">
    <div class="enap-carousel-inner">
        <!-- Cabeçalho do carrossel -->
        <div class="enap-carousel-header">
            <h2 class="enap-carousel-title">
                {{ value.title|default:"Acervo para Servidores" }}
            </h2>
            <p class="enap-carousel-subtitle">{{ value.subtitle|default:"Comprometidos com a Transformação" }}</p>
        </div>
        
        <!-- Container do carrossel com largura controlada -->
        <div class="enap-carousel-content">
            
            <!-- Wrapper do carrossel -->
            <div class="enap-carousel-wrapper">
                {% if value.items %}
                    {% for item in value.items %}
                        <div class="enap-carousel-card">
                            <div class="enap-carousel-card-inner">
                                <div class="enap-carousel-card-content">
                                    {% if item.image %}
                                        {% image item.image original format-webp class="img-fluid rounded enap-carousel-image" %}
                                    {% else %}
                                        <div class="enap-carousel-image-placeholder">
                                            <span>Imagem indisponível</span>
                                        </div>
                                    {% endif %}
                                    <div class="enap-carousel-text-container">
                                        <div class="enap-carousel-card-description">
                                            <h3 class="enap-carousel-card-title">{{ item.title }}</h3>
                                            <p class="enap-carousel-card-description">{{ item.description }}</p>
                                        </div>
                                        <a href="{{ item.link_url }}" class="enap-carousel-card-link" onclick="saveCarouselPosition(this)">
                                            {{ item.link_text }} <i class="fa-solid fa-circle-chevron-right enap-carousel-card-link-icon"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                {% else %}
                    <!-- Cards de demonstração quando não há itens -->
                    <div class="enap-carousel-card">
                        <div class="enap-carousel-card-inner">
                            <div class="enap-carousel-card-content">
                                <div class="enap-carousel-image-placeholder">
                                    <span>Imagem 1</span>
                                </div>
                                <div class="enap-carousel-text-container">
                                    <div>
                                        <h3 class="enap-carousel-card-title">Introdução à gestão</h3>
                                        <p class="enap-carousel-card-description">Apresenta os procedimentos essenciais para lidar com questões éticas.</p>
                                    </div>
                                    <a href="#" class="enap-carousel-card-link" onclick="saveCarouselPosition(this)">
                                        Acesse o curso <span class="enap-carousel-card-link-icon">→</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="enap-carousel-card">
                        <div class="enap-carousel-card-inner">
                            <div class="enap-carousel-card-content">
                                <div class="enap-carousel-image-placeholder">
                                    <span>Imagem 2</span>
                                </div>
                                <div class="enap-carousel-text-container">
                                    <div>
                                        <h3 class="enap-carousel-card-title">Assédio moral</h3>
                                        <p class="enap-carousel-card-description">Orienta servidores para identificação e prevenção de assédio.</p>
                                    </div>
                                    <a href="#" class="enap-carousel-card-link" onclick="saveCarouselPosition(this)">
                                        Acesse o curso <span class="enap-carousel-card-link-icon">→</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="enap-carousel-card">
                        <div class="enap-carousel-card-inner">
                            <div class="enap-carousel-card-content">
                                <div class="enap-carousel-image-placeholder">
                                    <span>Imagem 3</span>
                                </div>
                                <div class="enap-carousel-text-container">
                                    <div>
                                        <h3 class="enap-carousel-card-title">Gestão de conflitos</h3>
                                        <p class="enap-carousel-card-description">Capacita servidores para gerir conflitos eficazmente.</p>
                                    </div>
                                    <a href="#" class="enap-carousel-card-link" onclick="saveCarouselPosition(this)">
                                        Acesse o curso <span class="enap-carousel-card-link-icon">→</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="enap-carousel-card">
                        <div class="enap-carousel-card-inner">
                            <div class="enap-carousel-card-content">
                                <div class="enap-carousel-image-placeholder">
                                    <span>Imagem 4</span>
                                </div>
                                <div class="enap-carousel-text-container">
                                    <div>
                                        <h3 class="enap-carousel-card-title">Times de alta performance</h3>
                                        <p class="enap-carousel-card-description">Estimula habilidades gerenciais e trabalho em equipe.</p>
                                    </div>
                                    <a href="#" class="enap-carousel-card-link" onclick="saveCarouselPosition(this)">
                                        Saiba mais <span class="enap-carousel-card-link-icon">→</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endif %}
            </div>
        
            <!-- Indicadores -->
            <div class="enap-carousel-indicators">
                {% if value.items %}
                    {% for item in value.items %}
                        <span class="enap-carousel-indicator {% if forloop.first %}active{% endif %}" data-index="{{ forloop.counter0 }}"></span>
                    {% endfor %}
                {% else %}
                    <span class="enap-carousel-indicator active" data-index="0"></span>
                    <span class="enap-carousel-indicator" data-index="1"></span>
                    <span class="enap-carousel-indicator" data-index="2"></span>
                    <span class="enap-carousel-indicator" data-index="3"></span>
                {% endif %}
            </div>
        </div>
        
        <!-- Botão Anterior -->
        <button class="enap-carousel-prev-btn" aria-label="Slide anterior">
            <img class="enap-carousel-btn-image" src="{% static 'enap_designsystem/icons/iconleft.svg' %}" alt="Passar pro lado esquerdo">
        </button>

        <!-- Botão Próximo -->
        <button class="enap-carousel-next-btn" aria-label="Próximo slide">
            <img class="enap-carousel-btn-image" src="{% static 'enap_designsystem/icons/iconrig.svg' %}" alt="Passar pro lado direito">
        </button>
    </div>
</div>

<script>
    // Função global para salvar posição do carrossel antes de navegar
function saveCarouselPosition(element) {
    var carouselContainer = element.closest('.enap-carousel-container');
    var carouselId = carouselContainer.getAttribute('data-carousel-id');
    var currentIndex = carouselContainer.carouselInstance ? carouselContainer.carouselInstance.currentIndex : 0;
    
    // Salvar no sessionStorage (persiste durante a sessão do navegador)
    sessionStorage.setItem('carousel_position_' + carouselId, currentIndex);
    sessionStorage.setItem('carousel_return_url_' + carouselId, window.location.href);
}

document.addEventListener('DOMContentLoaded', function() {
    // Inicializar cada carrossel independentemente
    document.querySelectorAll('.enap-carousel-container').forEach(function(carouselContainer) {
        // Obter ID único do carrossel
        var carouselId = carouselContainer.getAttribute('data-carousel-id');
        
        // Elementos do carrossel específico
        var wrapper = carouselContainer.querySelector('.enap-carousel-wrapper');
        var prevBtn = carouselContainer.querySelector('.enap-carousel-prev-btn');
        var nextBtn = carouselContainer.querySelector('.enap-carousel-next-btn');
        var indicators = carouselContainer.querySelectorAll('.enap-carousel-indicator');
        var cards = carouselContainer.querySelectorAll('.enap-carousel-card');
        
        // Verificar se existem elementos necessários
        if (!wrapper || !cards.length) {
            console.warn('Carrossel incompleto encontrado:', carouselId);
            return;
        }
        
        // Detectar se estamos em um dispositivo móvel
        var isMobile = window.innerWidth < 768;
        
        // ABORDAGEM PARA MOBILE: ROLAGEM LIVRE EM UM ÚNICO CONTAINER
        if (isMobile) {
            // 1. Remover todos os listeners de eventos touch do wrapper
            wrapper.replaceWith(wrapper.cloneNode(true));
            
            // 2. Redefinir referência após clonagem
            wrapper = carouselContainer.querySelector('.enap-carousel-wrapper');
            
            // 3. Configurar o wrapper para rolagem horizontal nativa em dispositivos móveis
            wrapper.style.display = 'flex';
            wrapper.style.overflowX = 'auto';
            wrapper.style.scrollSnapType = 'x mandatory'; // Adiciona snap points para paradas suaves
            wrapper.style.webkitOverflowScrolling = 'touch'; // Para melhor desempenho no iOS
            wrapper.style.scrollBehavior = 'smooth'; // Rolagem suave
            wrapper.style.padding = '0'; // Remove padding que poderia afetar o layout
            wrapper.style.margin = '0'; // Remove margin que poderia afetar o layout
            wrapper.style.msOverflowStyle = 'none'; // Para esconder a barra de rolagem no IE/Edge
            wrapper.style.scrollbarWidth = 'none'; // Para esconder a barra de rolagem em navegadores modernos
            
            // Esconder scrollbar no WebKit (Chrome, Safari)
            wrapper.style.cssText += `::-webkit-scrollbar { display: none; }`;
            
            // 4. Configurar cada card para snap scroll e tamanho correto
            cards.forEach(function(card, index) {
                card.style.flex = '0 0 100%'; // Cada card ocupa 100% da largura visível
                card.style.scrollSnapAlign = 'center'; // Centraliza no snap
                card.style.position = 'relative'; // Importante para o posicionamento correto
                card.style.width = '100%'; // Garante que ocupe 100%
                card.setAttribute('data-index', index);
                
                // Garantir que a imagem se ajuste corretamente
                var img = card.querySelector('img');
                if (img) {
                    img.style.width = '100%';
                    img.style.height = 'auto';
                    img.style.objectFit = 'cover';
                }
            });
            
            // 5. Adicionar evento de scroll para atualizar indicadores
            wrapper.addEventListener('scroll', function() {
                // Encontrar o card mais visível
                var scrollPosition = wrapper.scrollLeft;
                var cardWidth = wrapper.clientWidth;
                var currentCardIndex = Math.round(scrollPosition / cardWidth);
                
                // Atualizar indicadores
                indicators.forEach(function(indicator, i) {
                    if (i === currentCardIndex) {
                        indicator.classList.add('active');
                    } else {
                        indicator.classList.remove('active');
                    }
                });
                
                // Habilitar/desabilitar botões de navegação
                if (prevBtn) {
                    prevBtn.style.opacity = currentCardIndex <= 0 ? '0.3' : '1';
                    prevBtn.disabled = currentCardIndex <= 0;
                }
                
                if (nextBtn) {
                    nextBtn.style.opacity = currentCardIndex >= cards.length - 1 ? '0.3' : '1';
                    nextBtn.disabled = currentCardIndex >= cards.length - 1;
                }
            }, { passive: true });
            
            // 6. Eventos de clique nos indicadores (agora faz scroll suave)
            indicators.forEach(function(indicator, i) {
                indicator.addEventListener('click', function(e) {
                    e.preventDefault();
                    var cardWidth = wrapper.clientWidth;
                    wrapper.scrollTo({
                        left: i * cardWidth,
                        behavior: 'smooth'
                    });
                });
            });
            
            // 7. Botões de navegação (adaptados para scroll suave)
            if (prevBtn) {
                prevBtn.addEventListener('click', function(e) {
                    e.preventDefault();
                    var scrollPosition = wrapper.scrollLeft;
                    var cardWidth = wrapper.clientWidth;
                    var currentCardIndex = Math.round(scrollPosition / cardWidth);
                    
                    if (currentCardIndex > 0) {
                        wrapper.scrollTo({
                            left: (currentCardIndex - 1) * cardWidth,
                            behavior: 'smooth'
                        });
                    }
                });
            }
            
            if (nextBtn) {
                nextBtn.addEventListener('click', function(e) {
                    e.preventDefault();
                    var scrollPosition = wrapper.scrollLeft;
                    var cardWidth = wrapper.clientWidth;
                    var currentCardIndex = Math.round(scrollPosition / cardWidth);
                    
                    if (currentCardIndex < cards.length - 1) {
                        wrapper.scrollTo({
                            left: (currentCardIndex + 1) * cardWidth,
                            behavior: 'smooth'
                        });
                    }
                });
            }
            
            // Disparar evento de scroll para inicializar os indicadores
            wrapper.dispatchEvent(new Event('scroll'));
            
        } else {
            // ABORDAGEM PARA DESKTOP (mantém o comportamento original)
            
            // Variáveis de controle
            var currentIndex = 0;
            var cardsPerView = getCardsPerView();
            var isTransitioning = false;
            
            // Calcular maxIndex baseado no tipo de dispositivo
            var maxIndex = Math.max(0, cards.length - cardsPerView);
            
            // Restaurar posição salva se existir
            var savedPosition = sessionStorage.getItem('carousel_position_' + carouselId);
            var savedReturnUrl = sessionStorage.getItem('carousel_return_url_' + carouselId);
            
            if (savedPosition !== null && savedReturnUrl === window.location.href) {
                currentIndex = Math.max(0, Math.min(parseInt(savedPosition), maxIndex));
            }
            
            // Armazenar instância do carrossel no elemento para acesso global
            carouselContainer.carouselInstance = {
                currentIndex: currentIndex,
                moveCarousel: function(index) { moveCarousel(index); }
            };
            
            // Variáveis para touch/swipe
            var touchStartX = 0;
            var touchStartY = 0;
            var touchCurrentX = 0;
            var touchCurrentY = 0;
            var isDragging = false;
            var initialTransform = 0;
            var hasMovedHorizontally = false;
            
            // Função para determinar quantos cards mostrar por vez
            function getCardsPerView() {
                var width = window.innerWidth;
                if (width < 768) return 1; // Mobile: sempre 1 card por vez
                if (width >= 1200) return 4;
                if (width >= 992) return 3;
                return 2;
            }
            
            // Função para mover o carrossel
            function moveCarousel(index, smooth = true) {
                if (isTransitioning && smooth) return;
                
                // Recalcular valores em caso de redimensionamento
                cardsPerView = getCardsPerView();
                maxIndex = Math.max(0, cards.length - cardsPerView);
                
                // Limitar índice aos valores válidos
                index = Math.max(0, Math.min(index, maxIndex));
                currentIndex = index;
                
                // Atualizar instância
                carouselContainer.carouselInstance.currentIndex = currentIndex;
                
                // Salvar posição atual
                sessionStorage.setItem('carousel_position_' + carouselId, currentIndex);
                sessionStorage.setItem('carousel_return_url_' + carouselId, window.location.href);
                
                // Aplicar transição
                if (smooth) {
                    isTransitioning = true;
                    wrapper.style.transition = 'transform 0.3s ease-out';
                } else {
                    wrapper.style.transition = 'none';
                }
                
                // Calcular transformação para desktop
                var translateValue = -currentIndex * (100 / cardsPerView);
                wrapper.style.transform = 'translateX(' + translateValue + '%)';
                
                // Atualizar UI
                updateIndicators();
                updateButtonsState();
                
                if (smooth) {
                    setTimeout(function() {
                        isTransitioning = false;
                    }, 300);
                }
            }
            
            // Função para atualizar estado dos botões
            function updateButtonsState() {
                // Botão anterior
                if (prevBtn) {
                    if (currentIndex <= 0) {
                        prevBtn.disabled = true;
                        prevBtn.style.opacity = '0.3';
                        prevBtn.style.cursor = 'not-allowed';
                    } else {
                        prevBtn.disabled = false;
                        prevBtn.style.opacity = '1';
                        prevBtn.style.cursor = 'pointer';
                    }
                    // Sempre visível
                    prevBtn.style.display = 'block';
                }
                
                // Botão próximo
                if (nextBtn) {
                    if (currentIndex >= maxIndex) {
                        nextBtn.disabled = true;
                        nextBtn.style.opacity = '0.3';
                        nextBtn.style.cursor = 'not-allowed';
                    } else {
                        nextBtn.disabled = false;
                        nextBtn.style.opacity = '1';
                        nextBtn.style.cursor = 'pointer';
                    }
                    // Sempre visível
                    nextBtn.style.display = 'block';
                }
            }
            
            // Função para atualizar indicadores
            function updateIndicators() {
                indicators.forEach(function(indicator, i) {
                    if (i === currentIndex) {
                        indicator.classList.add('active');
                    } else {
                        indicator.classList.remove('active');
                    }
                });
            }
            
            // ===== EVENTOS DE BOTÕES =====
            if (prevBtn) {
                prevBtn.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    
                    // Verificar se botão está desabilitado
                    if (prevBtn.disabled || currentIndex <= 0) {
                        return;
                    }
                    
                    moveCarousel(currentIndex - 1);
                });
            }
            
            if (nextBtn) {
                nextBtn.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    
                    // Verificar se botão está desabilitado
                    if (nextBtn.disabled) {
                        return;
                    }
                    
                    var maxIdx = Math.max(0, cards.length - getCardsPerView());
                    
                    if (currentIndex < maxIdx) {
                        moveCarousel(currentIndex + 1);
                    }
                });
            }
            
            // Eventos de indicadores
            indicators.forEach(function(indicator, i) {
                indicator.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    moveCarousel(i);
                });
            });
            
            // ===== MOUSE EVENTS PARA DESKTOP =====
            var isMouseDragging = false;
            var mouseStartX = 0;
            var mouseInitialTransform = 0;
            
            wrapper.addEventListener('mousedown', function(e) {
                if (isTransitioning) return;
                
                isMouseDragging = true;
                mouseStartX = e.clientX;
                wrapper.style.cursor = 'grabbing';
                wrapper.style.userSelect = 'none';
                
                // Capturar transformação atual
                var computedStyle = window.getComputedStyle(wrapper);
                var transform = computedStyle.transform;
                
                if (transform && transform !== 'none') {
                    var matrix = transform.match(/matrix\(([^)]+)\)/);
                    if (matrix) {
                        var values = matrix[1].split(',');
                        mouseInitialTransform = parseFloat(values[4]) || 0;
                    } else {
                        mouseInitialTransform = 0;
                    }
                } else {
                    mouseInitialTransform = 0;
                }
                
                wrapper.style.transition = 'none';
                e.preventDefault();
            });
            
            document.addEventListener('mousemove', function(e) {
                if (!isMouseDragging) return;
                
                var diffX = e.clientX - mouseStartX;
                var containerWidth = wrapper.offsetWidth;
                var movePercentage = (diffX / containerWidth) * 100;
                var newTransform = mouseInitialTransform + movePercentage;
                
                wrapper.style.transform = 'translateX(' + newTransform + '%)';
            });
            
            document.addEventListener('mouseup', function(e) {
                if (!isMouseDragging) return;
                
                isMouseDragging = false;
                wrapper.style.cursor = 'grab';
                wrapper.style.userSelect = '';
                
                var diffX = e.clientX - mouseStartX;
                var threshold = 50;
                
                if (Math.abs(diffX) > threshold) {
                    if (diffX > 0) {
                        moveCarousel(currentIndex - 1);
                    } else {
                        moveCarousel(currentIndex + 1);
                    }
                } else {
                    moveCarousel(currentIndex);
                }
            });
            
            // ===== REDIMENSIONAMENTO DA JANELA =====
            var resizeTimeout;
            window.addEventListener('resize', function() {
                clearTimeout(resizeTimeout);
                resizeTimeout = setTimeout(function() {
                    // Se mudamos para/de mobile, recarregar a página
                    var newIsMobile = window.innerWidth < 768;
                    if (newIsMobile !== isMobile) {
                        location.reload();
                        return;
                    }
                    
                    var newCardsPerView = getCardsPerView();
                    var newMaxIndex = Math.max(0, cards.length - newCardsPerView);
                    
                    if (newCardsPerView !== cardsPerView) {
                        cardsPerView = newCardsPerView;
                        maxIndex = newMaxIndex;
                        
                        // Ajustar currentIndex se necessário
                        if (currentIndex > maxIndex) {
                            currentIndex = maxIndex;
                        }
                        
                        moveCarousel(currentIndex, false);
                    }
                    updateButtonsState();
                }, 150);
            });
            
            // ===== INICIALIZAÇÃO =====
            // Configurar cursor para desktop
            wrapper.style.cursor = 'grab';
            
            // Inicializar na posição correta
            moveCarousel(currentIndex, false);
        }
    });
});

// Limpar dados antigos do sessionStorage
window.addEventListener('beforeunload', function() {
    var currentUrl = window.location.href;
    var keysToRemove = [];
    
    try {
        for (var i = 0; i < sessionStorage.length; i++) {
            var key = sessionStorage.key(i);
            if (key && key.startsWith('carousel_return_url_')) {
                var savedUrl = sessionStorage.getItem(key);
                if (savedUrl !== currentUrl) {
                    var carouselId = key.replace('carousel_return_url_', '');
                    keysToRemove.push('carousel_position_' + carouselId);
                    keysToRemove.push(key);
                }
            }
        }
        
        keysToRemove.forEach(function(key) {
            sessionStorage.removeItem(key);
        });
    } catch (e) {
        // Ignorar erros de sessionStorage
    }
});
</script>
{% endblock %}