{% load static %}
{% load wagtailcore_tags wagtailimages_tags %}
{% block content %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<style>
  /* Configurações de velocidade do carrossel */
  .carousel-items01.velocidade-lento {
    transition: transform 0.5s ease-in-out;
  }
  
  .carousel-items01.velocidade-normal {
    transition: transform 0.3s ease-in-out;
  }
  
  .carousel-items01.velocidade-rapido {
    transition: transform 0.2s ease-in-out;
  }

  /* Header alinhado à esquerda */
  .suap-header-left {
    margin-bottom: 2rem;
  }

  .suap-titulo-left {
    margin-bottom: 0.5rem;
  }

  .suap-desc-left {
    text-align: left;
    margin-bottom: 0;
  }

  /* Container do card com posicionamento relativo */
  .suap-card-container {
    position: relative;
    display: flex;
    width: 100%;
  }

  /* Link que cobre todo o card */
  .suap-card-link {
    display: flex;
    width: 100%;
    text-decoration: none;
    color: inherit;
  }

  .suap-card-link:hover {
    text-decoration: none;
    color: inherit;
  }

  /* Card com altura uniforme */
  .suap-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 300px;
    width: 100%;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  .suap-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  }

  /* Tag do status */
  .suap-card-tag {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
  }

  .suap-card-tag span {
    color: var(--highlight-color);
    font-weight: 600;
    background: rgba(255, 255, 255, 0.9);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
  }

  /* Conteúdo do card */
  .suap-card-content {
    flex-grow: 1;
    padding: 3rem 1.5rem 1rem 1.5rem;
  }

  .suap-card-title {
    color: var(--highlight-color);
    margin-bottom: 1rem;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
  }

  .suap-card-description {
    margin-bottom: 1.5rem;
    text-align: left;
  }

  .suap-card-description p {
    min-height: 60px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
    color: #666;
  }

  /* Informações do curso */
  .suap-card-info {
    padding: 0 1.5rem 1.5rem 1.5rem;
    margin-top: auto;
  }

  .suap-info-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
  }

  .suap-info-item:last-child {
    margin-bottom: 0;
  }

  .suap-info-item i {
    font-size: 0.9em;
    opacity: 0.8;
  }

  .suap-info-text {
    font-size: 0.9rem;
    color: #666;
  }

  /* Botão compartilhar posicionado sobre o card */
  .suap-share-button {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 3;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
  }

  .suap-share-button:hover {
    background: white;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  .suap-share-button i {
    color: #666;
    font-size: 1rem;
  }

  .suap-share-button:hover i {
    color: var(--highlight-color, #024248);
  }

  /* Cards com altura uniforme no carrossel */
  .carousel-item-wrapper-suap {
    display: flex;
  }

  /* Responsividade */
  @media (max-width: 768px) {
    .suap-card {
      min-height: 350px;
    }
    
    .suap-card-content {
      padding: 2.5rem 1rem 1rem 1rem;
    }
    
    .suap-card-info {
      padding: 0 1rem 1rem 1rem;
    }
  }
</style>

{% if cursos_suap %}
    <section class="section-curso-cards-suap">
        <!-- Título e descrição alinhados à esquerda -->
        <div class="suap-header-left">
            <h2 class="suap-titulo-left">{{ bloco_config.title }}</h2>
            <h4 class="suap-desc-left">{{ bloco_config.description }}</h4>
        </div>

        <!-- Carrossel de Cards -->
        <div class="wrapper-carousel-container01">
            <div class="carousel-container01">
                <div class="carousel-items01 velocidade-{{ bloco_config.velocidade_carrossel }}" id="cursos-suap-carousel">
                    {% for curso in cursos_suap %}
                    <div class="carousel-item-wrapper-suap">
                        <div class="suap-card-container">
                            <!-- Card todo clicável -->
                            <a href="{{ curso.link_url }}" class="suap-card-link" target="_blank" rel="noopener" title="{{ curso.title }}">
                                <div class="suap-card {{ curso.type }}" style="--highlight-color: {{ curso.highlight_color }}">
                                    <div class="suap-card-tag">
                                        {% if curso.type == 'card-curso-em-breve' %}
                                            <span>Em breve</span>
                                        {% elif curso.type == 'card-curso-aberto' %}
                                            <span>Inscrições abertas</span>
                                        {% elif curso.type == 'card-curso-andamento' %}
                                            <span>Em andamento</span>
                                        {% elif curso.type == 'card-curso-encerrado' %}
                                            <span>Encerrado</span>
                                        {% endif %}
                                    </div>
                                    
                                    <div class="suap-card-content">
                                        <h2 class="suap-card-title">{{ curso.title }}</h2>
                                        
                                        <div class="suap-card-description">
                                            <p>{{ curso.description|truncatewords:20 }}</p>
                                        </div>
                                    </div>
                                    
                                    <div class="suap-card-info">
                                        {% if curso.carga_horaria and curso.carga_horaria != 'Não informado' %}
                                            <div class="suap-info-item">
                                                <i class="fa-solid fa-clock" style="color: var(--highlight-color);"></i>
                                                <span class="suap-info-text">Carga-horária: {{ curso.carga_horaria }}</span>
                                            </div>
                                        {% endif %}
                                        
                                        {% if curso.modalidade %}
                                            <div class="suap-info-item">
                                                {% if curso.modalidade == 'presencial' %}
                                                    <i class="fa-solid fa-location-dot"></i>
                                                {% elif curso.modalidade == 'online' %}
                                                    <i class="fa-solid fa-laptop"></i>
                                                {% elif curso.modalidade == 'hibrido' %}
                                                    <i class="fa-solid fa-globe"></i>
                                                {% endif %}
                                                <span class="suap-info-text">{{ curso.modalidade|title }}</span>
                                            </div>
                                        {% endif %}
                                    </div>
                                </div>
                            </a>
                            
                            <!-- Botão compartilhar fora do link (funcional) -->
                            <button type="button" 
                                    class="suap-share-button" 
                                    aria-label="Compartilhar curso: {{ curso.title }}"
                                    onclick="compartilharCurso('{{ curso.title|escapejs }}', '{{ curso.link_url|escapejs }}')">
                                <i class="fa-solid fa-share-nodes"></i>
                            </button>
                        </div>
                    </div>
                    {% empty %}
                    <div class="carousel-item-wrapper-suap">
                        <div class="no-courses-message">
                            <p>Nenhum curso disponível no momento.</p>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                
                <!-- Controles do Carrossel (condicionais) -->
                {% if bloco_config.mostrar_controles %}
                    <button class="carousel-control-curso-suap carousel-control-curso-suap-prev">
                        <img style="width: 40px; height: 40px;" src="{% static 'enap_designsystem/icons/iconleft.svg' %}" alt="Passar pro lado esquerdo">
                    </button>
                    <button class="carousel-control-curso-suap carousel-control-curso-suap-next">
                        <img style="width: 40px; height: 40px;" src="{% static 'enap_designsystem/icons/iconrig.svg' %}" alt="Passar pro lado direito">
                    </button>
                {% endif %}
            </div>
        </div>

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

    <script>
        // Função para compartilhamento
        function compartilharCurso(titulo, url) {
            // Verificar se o navegador suporta Web Share API
            if (navigator.share) {
                navigator.share({
                    title: titulo,
                    text: `Confira este curso: ${titulo}`,
                    url: url
                }).catch((error) => {
                    console.log('Erro ao compartilhar:', error);
                    // Fallback para clipboard
                    copiarParaClipboard(titulo, url);
                });
            } else {
                // Fallback: copiar para clipboard
                copiarParaClipboard(titulo, url);
            }
        }

        // Função fallback para copiar link
        function copiarParaClipboard(titulo, url) {
            const texto = `${titulo} - ${url}`;
            
            if (navigator.clipboard) {
                navigator.clipboard.writeText(texto).then(() => {
                    mostrarNotificacao('Link copiado para a área de transferência!');
                }).catch(() => {
                    // Fallback mais antigo
                    copiarTextoLegacy(texto);
                });
            } else {
                copiarTextoLegacy(texto);
            }
        }

        // Método legacy para copiar texto
        function copiarTextoLegacy(texto) {
            const textarea = document.createElement('textarea');
            textarea.value = texto;
            document.body.appendChild(textarea);
            textarea.select();
            
            try {
                document.execCommand('copy');
                mostrarNotificacao('Link copiado para a área de transferência!');
            } catch (err) {
                mostrarNotificacao('Não foi possível copiar o link');
            }
            
            document.body.removeChild(textarea);
        }

        // Função para mostrar notificação
        function mostrarNotificacao(mensagem) {
            // Criar elemento de notificação
            const notificacao = document.createElement('div');
            notificacao.textContent = mensagem;
            notificacao.style.cssText = `
                position: fixed;
                top: 20px;
                right: 20px;
                background: #4CAF50;
                color: white;
                padding: 12px 20px;
                border-radius: 8px;
                box-shadow: 0 4px 12px rgba(0,0,0,0.15);
                z-index: 1000;
                font-size: 14px;
                font-weight: 500;
                opacity: 0;
                transform: translateY(-20px);
                transition: all 0.3s ease;
            `;
            
            document.body.appendChild(notificacao);
            
            // Animar entrada
            setTimeout(() => {
                notificacao.style.opacity = '1';
                notificacao.style.transform = 'translateY(0)';
            }, 100);
            
            // Remover após 3 segundos
            setTimeout(() => {
                notificacao.style.opacity = '0';
                notificacao.style.transform = 'translateY(-20px)';
                setTimeout(() => {
                    document.body.removeChild(notificacao);
                }, 300);
            }, 3000);
        }

        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');
            
            // Só executa se tem controles visíveis
            const hasControls = {{ bloco_config.mostrar_controles|yesno:"true,false" }};
            
            let currentIndex = 0;
            let startX, moveX, initialPosition;
            let isDragging = false;
            let itemWidth, itemsGap, containerWidth, visibleItems, maxIndex;
            
            // 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);
            }
            
            // Função para exibir o slide
            function showSlide(index) {
                calculateDimensions();
                currentIndex = Math.max(0, Math.min(index, maxIndex));
                const offset = currentIndex * (itemWidth + itemsGap);
                carousel.style.transform = `translateX(-${offset}px)`;
                
                if (hasControls) {
                    updateNavigationButtons();
                }
            }
            
            // Função para atualizar a visibilidade dos botões de navegação
            function updateNavigationButtons() {
                if (!hasControls) return;
                
                if (window.innerWidth <= 768) {
                    prevButton.style.display = 'none';
                    nextButton.style.display = 'none';
                    return;
                }
                
                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';
                }
            }
            
            // Inicializar
            calculateDimensions();
            if (hasControls) {
                updateNavigationButtons();
                
                // Controles de seta
                prevButton.addEventListener('click', () => {
                    const moveBy = window.innerWidth <= 768 ? 1 : 1;
                    showSlide(currentIndex - moveBy);
                });
                
                nextButton.addEventListener('click', () => {
                    const moveBy = window.innerWidth <= 768 ? 1 : 1;
                    showSlide(currentIndex + moveBy);
                });
            }
            
            // Touch e arraste para mobile (sempre ativo)
            carousel.addEventListener('touchstart', handleStart, { passive: true });
            carousel.addEventListener('touchmove', handleMove, { passive: true });
            carousel.addEventListener('touchend', handleEnd, { passive: true });
            
            // Mouse para desktop (sempre ativo)
            carousel.addEventListener('mousedown', handleStart);
            carousel.addEventListener('mousemove', handleMove);
            carousel.addEventListener('mouseup', handleEnd);
            carousel.addEventListener('mouseleave', handleEnd);
            
            function handleStart(e) {
                isDragging = true;
                startX = e.type === 'touchstart' ? e.touches[0].clientX : e.clientX;
                initialPosition = currentIndex * (itemWidth + itemsGap);
                carousel.style.transition = 'none';
            }
            
            function handleMove(e) {
                if (!isDragging) return;
                
                moveX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;
                const diff = moveX - startX;
                
                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;
                
                // Aplicar velocidade configurada
                const velocidade = '{{ bloco_config.velocidade_carrossel }}';
                let duration = '0.3s';
                if (velocidade === 'lento') duration = '0.5s';
                else if (velocidade === 'rapido') duration = '0.2s';
                
                carousel.style.transition = `transform ${duration} ease-in-out`;
                
                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();
                    if (currentIndex > maxIndex) {
                        currentIndex = maxIndex;
                    }
                    showSlide(currentIndex);
                }, 100);
            });
        });
    </script> 
{% else %}
    <section class="section-curso-cards-suap">
        <div class="wrapper-text-cursos">
            <h2 class="h2-cursos">{{ bloco_config.title }}</h2>
            <h4 class="h4-desc">Nenhum curso disponível no momento.</h4>
        </div>
    </section>
{% endif %}
{% endblock %}