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

{% if cursos_suap %}
	<section class="section-curso-cards-suap">
        <div class="wrapper-text-cursos">
            <h2 class="h2-cursos">{{ bloco_suap.title }}</h2>
            <h3 class="h4-desc">{{ bloco_suap.description }}</h3>
        </div>

        <div class="wrapper-carousel-container01">
            <div class="carousel-container01">
                <div class="carousel-items01" id="cursos-suap-carousel">
                    {% for curso in cursos_suap %}
                    <a href="{{curso.link}}" class="btn1">
                    <div class="carousel-item-wrapper-suap">
                        <div class="carousel-item-curso-suap">
                            <div class="image-curso">
                                {% if curso.imagem %}
                                    <h2 href="{{ curso.link }}" title="{{ curso.titulo }}">
                                        <img class="img-fluid" src="{{ curso.imagem }}" alt="{{ curso.titulo }}" width="236" height="140" loading="lazy">
                                    </h2>
                                {% else %}
                                    <h3 href="{{ curso.link }}" title="{{ curso.titulo }}">
                                        {% if "Gestão de Pessoas" in curso.tema %}
                                            <img class="img-fluid" src="{% static 'enap_designsystem/blocks/suap/default_2.png' %}" alt="Imagem padrão com logo da Enap e fundo verde" width="236" height="140" loading="lazy">
                                        {% else %}
                                            <img class="img-fluid" src="{% static 'enap_designsystem/blocks/suap/default_1.png' %}" alt="Imagem padrão com logo da Enap e fundo verde" width="236" height="140" loading="lazy">
                                        {% endif %}
                                    </h3>
                                {% endif %}
                            </div>
                            <div class="content-curso">
                                
                                <div class="card-body">
                                <div class="tag">Aberto</div>
                                <h3 class="h3-card" href="{{curso.link}}" style="
                                                                                display: -webkit-box;
                                                                                -webkit-line-clamp: 3;
                                                                                -webkit-box-orient: vertical;
                                                                                overflow: hidden;
                                                                                text-overflow: ellipsis;
                                                                                ">{{ curso.titulo }}</h3>
                                                                                <p class="card-text-text" style="
                                                                                display: -webkit-box;
                                                                                color: #434A54;
                                                                                font-size: 16px;
                                                                                -webkit-line-clamp: 3;
                                                                                -webkit-box-orient: vertical;
                                                                                overflow: hidden;
                                                                                text-overflow: ellipsis;
                                                                                ">{{ curso.descricao }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    </a>
                    {% empty %}
                    <div class="carousel-item-wrapper-suap">

                    </div>
                    {% endfor %}
                </div>
                
                <button tabindex="-1" class="carousel-control-curso-suap carousel-control-curso-suap-prev">
                    <span class="visually-hidden">Rolar para esquerda</span>
                    <span class="material-symbols-outlined setas seta-esquerda">chevron_left</span>
                </button>
                <button tabindex="-1" class="carousel-control-curso-suap carousel-control-curso-suap-next">
                    <span class="visually-hidden">Rolar para direita</span>
                    <span class="material-symbols-outlined setas seta-direita">chevron_right</span>
                </button>
                
            </div>
        </div>

        <div class="text-center mt-4">
            <a class="btn-todos" href="/busca/?q=&tipo=cursos&ordenacao=recentes" class="btn-todos">Ver todos os cursos</a>
        </div>
    </section>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const carousel = document.getElementById('cursos-suap-carousel');
            const prevButton = document.querySelector('.carousel-control-curso-suap-prev');
            const nextButton = document.querySelector('.carousel-control-curso-suap-next');
            const items = carousel.querySelectorAll('.carousel-item-wrapper-suap');
            
            let currentIndex = 0;
            let startX, moveX, initialPosition;
            let isDragging = false;
            let itemWidth, itemsGap, containerWidth, visibleItems, maxIndex;
            
            // Variáveis para controle do scroll do trackpad
            let isScrolling = false;
            let scrollTimeout;
            
            // Função para detectar se é dispositivo móvel
            function isMobile() {
                return window.innerWidth <= 768 || ('ontouchstart' in window);
            }
            
            // Função para calcular dimensões
            function calculateDimensions() {
                if (items.length === 0) return;
                
                itemWidth = items[0].offsetWidth;
                itemsGap = 25;
                containerWidth = carousel.parentElement.offsetWidth;
                
                // Calcular quantos itens são visíveis
                visibleItems = Math.floor(containerWidth / (itemWidth + itemsGap));
                
                // Se não couber nem um item completo, mostrar pelo menos 1
                if (visibleItems === 0) visibleItems = 1;
                
                // Calcular o índice máximo
                const totalItems = items.length;
                maxIndex = Math.max(0, totalItems - visibleItems);
                
                console.log('Dimensões calculadas:', {
                    itemWidth,
                    containerWidth,
                    visibleItems,
                    totalItems,
                    maxIndex
                });
            }
            
            // Função para exibir o slide
            function showSlide(index) {
                calculateDimensions(); // Recalcular sempre antes de mostrar
                currentIndex = Math.max(0, Math.min(index, maxIndex));
                const offset = currentIndex * (itemWidth + itemsGap);
                carousel.style.transform = `translateX(-${offset}px)`;
                
                updateNavigationButtons();
            }
            
            // Função para atualizar a visibilidade dos botões de navegação
            function updateNavigationButtons() {
                if (isMobile()) {
                    // No mobile, esconder botões
                    prevButton.style.display = 'none';
                    nextButton.style.display = 'none';
                    return;
                }
                
                // Desktop - lógica original
                if (currentIndex === 0) {
                    prevButton.style.display = 'none';
                    nextButton.style.display = maxIndex > 0 ? 'block' : 'none';
                } else if (currentIndex >= maxIndex) {
                    prevButton.style.display = 'block';
                    nextButton.style.display = 'none';
                } else {
                    prevButton.style.display = 'block';
                    nextButton.style.display = 'block';
                }
            }
            
            // Função para configurar cursor do carrossel
            function updateCarouselCursor() {
                if (isMobile()) {
                    carousel.style.cursor = 'grab';
                } else {
                    carousel.style.cursor = 'default';
                }
            }
            
            // Inicializar
            calculateDimensions();
            updateNavigationButtons();
            updateCarouselCursor();
            
            // Controles de seta - ajustar movimento baseado na tela
            prevButton.addEventListener('click', () => {
                const moveBy = isMobile() ? 1 : 4;
                showSlide(currentIndex - moveBy);
            });
            
            nextButton.addEventListener('click', () => {
                const moveBy = isMobile() ? 1 : 4;
                showSlide(currentIndex + moveBy);
            });
            
            
            carousel.addEventListener('wheel', function(e) {
                if (Math.abs(e.deltaX) > 0) {
                    e.preventDefault();
                    
                    // Obter posição atual do transform
                    const currentTransform = carousel.style.transform;
                    const match = currentTransform.match(/translateX\((-?\d*\.?\d*)px\)/);
                    let currentOffset = match ? parseFloat(match[1]) : 0;
                    
                    // Aplicar movimento proporcional (ajuste a velocidade aqui)
                    const scrollMultiplier = 1.2;
                    const newOffset = currentOffset - (e.deltaX * scrollMultiplier);
                    
                    // Calcular limites
                    const maxOffset = 0;
                    const minOffset = -(maxIndex * (itemWidth + itemsGap));
                    
                    // Aplicar limites com resistência
                    let finalOffset = newOffset;
                    
                    if (newOffset > maxOffset) {
                        const overscroll = newOffset - maxOffset;
                        finalOffset = maxOffset + (overscroll * 0.3);
                    } else if (newOffset < minOffset) {
                        const overscroll = newOffset - minOffset;
                        finalOffset = minOffset + (overscroll * 0.3);
                    }
                    
                    // Aplicar transform
                    carousel.style.transition = 'none';
                    carousel.style.transform = `translateX(${finalOffset}px)`;
                    
                    // Atualizar currentIndex baseado na posição
                    const newIndex = Math.round(Math.abs(finalOffset) / (itemWidth + itemsGap));
                    currentIndex = Math.max(0, Math.min(newIndex, maxIndex));
                    
                    // Atualizar botões
                    updateNavigationButtons();
                    
                    // Snap suave quando parar
                    clearTimeout(scrollTimeout);
                    scrollTimeout = setTimeout(() => {
                        carousel.style.transition = 'transform 0.3s ease-out';
                        showSlide(currentIndex);
                    }, 150);
                }
            }, { passive: false });
                        
            // Touch events - sempre ativados (para dispositivos touch)
            carousel.addEventListener('touchstart', handleStart, { passive: true });
            carousel.addEventListener('touchmove', handleMove, { passive: true });
            carousel.addEventListener('touchend', handleEnd, { passive: true });
            
            // Mouse events - APENAS para mobile (quando não há botões visíveis)
            function setupMouseEvents() {
                if (isMobile()) {
                    carousel.addEventListener('mousedown', handleStart);
                    carousel.addEventListener('mousemove', handleMove);
                    carousel.addEventListener('mouseup', handleEnd);
                    carousel.addEventListener('mouseleave', handleEnd);
                } else {
                    // Remover event listeners de mouse no desktop
                    carousel.removeEventListener('mousedown', handleStart);
                    carousel.removeEventListener('mousemove', handleMove);
                    carousel.removeEventListener('mouseup', handleEnd);
                    carousel.removeEventListener('mouseleave', handleEnd);
                }
            }
            
            setupMouseEvents();
            
            function handleStart(e) {
                // No desktop, não permitir arraste
                if (!isMobile() && e.type.startsWith('mouse')) {
                    return;
                }
                
                isDragging = true;
                startX = e.type === 'touchstart' ? e.touches[0].clientX : e.clientX;
                initialPosition = currentIndex * (itemWidth + itemsGap);
                carousel.style.transition = 'none';
                carousel.style.cursor = 'grabbing';
            }
            
            function handleMove(e) {
                if (!isDragging) return;
                
                // No desktop, não permitir arraste
                if (!isMobile() && e.type.startsWith('mouse')) {
                    return;
                }
                
                moveX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;
                const diff = moveX - startX;
                
                // Limitar o arrasto
                if (currentIndex === 0 && diff > 50) {
                    carousel.style.transform = `translateX(${diff / 3 - initialPosition}px)`;
                } else if (currentIndex >= maxIndex && diff < -50) {
                    carousel.style.transform = `translateX(${diff / 3 - initialPosition}px)`;
                } else {
                    carousel.style.transform = `translateX(${diff - initialPosition}px)`;
                }
            }
            
            function handleEnd() {
                if (!isDragging) return;
                isDragging = false;
                
                carousel.style.transition = 'transform 0.3s ease-in-out';
                carousel.style.cursor = isMobile() ? 'grab' : 'default';
                
                if (!moveX || !startX) {
                    showSlide(currentIndex);
                    return;
                }
                
                const diff = moveX - startX;
                const threshold = 50;
                
                if (diff > threshold) {
                    showSlide(currentIndex - 1);
                } else if (diff < -threshold) {
                    showSlide(currentIndex + 1);
                } else {
                    showSlide(currentIndex);
                }
            }
            
            // Ajustar o carrossel quando a janela é redimensionada
            window.addEventListener('resize', function() {
                setTimeout(() => {
                    calculateDimensions();
                    // Recalcular currentIndex se necessário
                    if (currentIndex > maxIndex) {
                        currentIndex = maxIndex;
                    }
                    updateCarouselCursor();
                    setupMouseEvents();
                    showSlide(currentIndex);
                }, 100);
            });
        });
    </script>
{% endif %}