{% load static %}
{% load wagtailimages_tags wagtailcore_tags %}
{% block content %}
<style>
    .events-container {
        --main-color: {{ cor_principal }};
    }

    .event-category {
        background-color: var(--main-color);
    }
</style>

<section id="eventos" class="section"{% if background_style %} style="{{ background_style }}"{% endif %}>
    <div class="container-events">
        <div class="enap-section-header-center">
            <h2 class="enap-section-title">{{ value.titulo_secao|safe }}</h2>
            <p class="enap-section-subtitle">
                {{ value.descricao_secao }}
            </p>
        </div>

        <div class="events-container" style="--main-color: {{ cor_principal }}">
            <div class="events-filter">
                <button class="btn primary evento-filter active" data-filter="all">Todos</button>
                {% for categoria in categorias %}
                <button class="btn secondary evento-filter" data-filter="{{ categoria.slug }}">{{ categoria.nome }}</button>
                {% endfor %}
            </div>
            
            <div class="events-carousel-wrapper">
                <div class="events-carousel-track">
                    {% for evento in eventos_ordenados %}
                        {% if evento.status_inscricao == 'link' and evento.link %}
                        <a href="{{ evento.link }}" class="event-card" data-category="{% for cat in categorias %}{% if cat.nome == evento.categoria %}{{ cat.slug }}{% endif %}{% endfor %}" style="text-decoration: none; color: inherit;">
                        {% else %}
                        <div class="event-card" data-category="{% for cat in categorias %}{% if cat.nome == evento.categoria %}{{ cat.slug }}{% endif %}{% endfor %}">
                        {% endif %}
                                <div class="event-image">
                                    {% if evento.imagem %}
                                        {% image evento.imagem fill-400x200 as img %}
                                        <img src="{{ img.url }}" alt="{{ evento.titulo }}">
                                    {% endif %}
                                    <div class="event-category">{{ evento.categoria }}</div>
                                    <div class="event-date">
                                        <span class="day">{{ evento.data|date:"d" }}</span>
                                        <span>{{ evento.data|date:"M" }}</span>
                                    </div>
                                </div>
                                <div class="event-content">
                                    <div class="wrapper-event-content">
                                        <h3 class="event-title">{{ evento.titulo }}</h3>
                                        <div class="event-info">
                                            <div class="event-info-item">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                    <circle cx="12" cy="12" r="10"></circle>
                                                    <polyline points="12 6 12 12 16 14"></polyline>
                                                </svg>
                                                {{ evento.hora_inicio|time:"H:i" }} - {{ evento.hora_fim|time:"H:i" }}
                                            </div>
                                            <div class="event-info-item">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                    <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                                                    <circle cx="12" cy="10" r="3"></circle>
                                                </svg>
                                                {{ evento.local }}
                                            </div>
                                        </div>
                                        <p class="event-description">
                                            {{ evento.descricao }}
                                        </p>
                                    </div>
                                    <div class="event-footer">
                                        {% if evento.vagas_disponiveis is not None %}
                                        <div class="available-spots">
                                            {{ evento.vagas_disponiveis }} vagas disponíveis
                                        </div>
                                        {% endif %}
                                        {% if evento.status_inscricao == 'em_breve' %}
                                            <span class="btn disabled medium">
                                                Em breve
                                            </span>
                                        {% elif evento.status_inscricao == 'encerrada' %}
                                            <span class="btn disabled medium encerrada">
                                                Encerrada
                                            </span>
                                        {% elif evento.link %}
                                            <span class="btn primary medium">
                                                Inscrever-se
                                                <i class="fa-solid fa-circle-chevron-right"></i>
                                            </span>
                                        {% else %}
                                            <span class="btn disabled medium">
                                                Indisponível
                                            </span>
                                        {% endif %}
                                    </div>
                                </div>
                        {% if evento.status_inscricao == 'link' and evento.link %}
                        </a>
                        {% else %}
                        </div>
                        {% endif %}
                    {% endfor %}
                </div>

                <button tabindex="-1" class="evento-carousel-btn evento-carousel-btn-prev" aria-label="Anterior">
                    <span class="visually-hidden">Rolar para esquerda</span>
                    <span class="material-symbols-outlined">chevron_left</span>
                </button>
                <button tabindex="-1" class="evento-carousel-btn evento-carousel-btn-next" aria-label="Próximo">
                    <span class="visually-hidden">Rolar para direita</span>
                    <span class="material-symbols-outlined">chevron_right</span>
                </button>
            </div>
        </div>

        <div class="container-btn_center">
        {% for block in value.link_cta_center %}
                {% include_block block %}
        {% endfor %}
        </div>
    </div>
</section>


<script>
    document.addEventListener('DOMContentLoaded', function() {
        const track = document.querySelector('.events-carousel-track');
        const prevBtn = document.querySelector('.evento-carousel-btn-prev');
        const nextBtn = document.querySelector('.evento-carousel-btn-next');
        const filterButtons = document.querySelectorAll('.evento-filter');

        function getCardScrollAmount() {
            const cards = track.querySelectorAll('.event-card');
            for (const card of cards) {
                if (card.offsetWidth > 0) {
                    return (card.offsetWidth + 25) * 3;
                }
            }
            return 1035;
        }

        function updateButtons() {
            const atStart = track.scrollLeft <= 0;
            const atEnd = track.scrollLeft >= track.scrollWidth - track.clientWidth - 5;
            prevBtn.style.display = atStart ? 'none' : 'flex';
            nextBtn.style.display = atEnd ? 'none' : 'flex';
        }

        prevBtn.addEventListener('click', function() {
            track.scrollLeft -= getCardScrollAmount();
            setTimeout(updateButtons, 450);
        });

        nextBtn.addEventListener('click', function() {
            track.scrollLeft += getCardScrollAmount();
            setTimeout(updateButtons, 450);
        });

        track.addEventListener('scroll', updateButtons);
        updateButtons();

        filterButtons.forEach(button => {
            button.addEventListener('click', function() {
                filterButtons.forEach(btn => btn.classList.remove('active'));
                this.classList.add('active');

                const filterValue = this.getAttribute('data-filter');
                const eventCards = track.querySelectorAll('.event-card');

                eventCards.forEach(card => {
                    if (filterValue === 'all' || card.getAttribute('data-category') === filterValue) {
                        card.style.display = '';
                    } else {
                        card.style.display = 'none';
                    }
                });

                track.scrollLeft = 0;
                setTimeout(updateButtons, 50);
            });
        });
    });
</script>
{% endblock %}