<?php
/**
 * Template Name: Agenda
 *
 * @package far_loop
 */

get_header();

$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;

$start_2024 = '20230101';
$end_2024   = '20231231';

$args = array(
    'post_type'      => 'activity',
    'posts_per_page' => -1,
    'paged'          => $paged,
    'orderby'        => 'meta_value',
    'order'          => 'ASC',
    'meta_key'       => 'dates_0_start_date',
    'tax_query'      => array(
        array(
            'taxonomy' => 'activity-type',
            'field'    => 'slug',
            'terms'    => 'exhibition',
            'operator' => 'NOT IN',
        ),
    ),
    'meta_query'     => array(
        array(
            'key'     => 'dates_0_start_date',
            'value'   => array( $start_2024, $end_2024 ),
            'compare' => 'BETWEEN',
            'type'    => 'DATE'
        ),
    ),
);

$events = new WP_Query( $args );

// Arrays de fechas
$dates_festival  = [];
$dates_fair      = [];
$dates_symposium = [];

if ( $events->have_posts() ) {
    while ( $events->have_posts() ) {
        $events->the_post();
        $event_date = get_field( 'dates' );
        if ( empty( $event_date[0]['start_date'] ) ) continue;
        $formatted_date = date_i18n( 'j M', strtotime( $event_date[0]['start_date'] ) );

        $terms        = get_the_terms( get_the_ID(), 'activity-type' );
        $parent_class = 'festival';
        if ( $terms && ! is_wp_error( $terms ) ) {
            foreach ( $terms as $term ) {
                $slug = $term->slug;
                if ( in_array( $slug, array( 'panel', 'conference', 'talk' ) ) ) {
                    $parent_class = 'symposium';
                } elseif ( in_array( $slug, array( 'professional-meeting', 'professional-meetings' ) ) ) {
                    $parent_class = 'fair';
                }
            }
        }

        if ( $parent_class === 'festival' && ! in_array( $formatted_date, $dates_festival ) ) {
            $dates_festival[] = $formatted_date;
        } elseif ( $parent_class === 'fair' && ! in_array( $formatted_date, $dates_fair ) ) {
            $dates_fair[] = $formatted_date;
        } elseif ( $parent_class === 'symposium' && ! in_array( $formatted_date, $dates_symposium ) ) {
            $dates_symposium[] = $formatted_date;
        }
    }
    wp_reset_postdata();
}
?>

<div class="header-new-agenda">
    <div class="agenda-top-controls">
        <div class="agenda-categories">
            <span data-filter=".festival" class="is-active">Festival Dates</span>
            <span data-filter=".fair">Fair Dates</span>
            <span data-filter=".symposium">Symposium Dates</span>
        </div>
       
    </div>

    <!-- Fechas -->
    <div class="agenda-dates agenda-dates-festival show" style="display:flex;">
        <span data-filter="" class="is-active">All Dates</span>
        <?php foreach ( $dates_festival as $date ) :
            $date_class = strtolower( str_replace( ' ', '-', $date ) ); ?>
            <span data-filter=".<?php echo esc_attr( $date_class ); ?>"><?php echo esc_html( $date ); ?></span>
        <?php endforeach; ?>
    </div>

    <div class="agenda-dates agenda-dates-fair" style="display:none;">
        <span data-filter="" class="is-active">All Dates</span>
        <?php foreach ( $dates_fair as $date ) :
            $date_class = strtolower( str_replace( ' ', '-', $date ) ); ?>
            <span data-filter=".<?php echo esc_attr( $date_class ); ?>"><?php echo esc_html( $date ); ?></span>
        <?php endforeach; ?>
    </div>

    <div class="agenda-dates agenda-dates-symposium" style="display:none;">
        <span data-filter="" class="is-active">All Dates</span>
        <?php foreach ( $dates_symposium as $date ) :
            $date_class = strtolower( str_replace( ' ', '-', $date ) ); ?>
            <span data-filter=".<?php echo esc_attr( $date_class ); ?>"><?php echo esc_html( $date ); ?></span>
        <?php endforeach; ?>
    </div>


     <div id="toggle-view" data-mode="images">List View</div>
</div>

<div class="u_pt-3 u_pt-md-6 agenda-grid-container">
    <div class="l_container u_mv-5">

        <?php if ( $events->have_posts() ) : ?>
            <!-- Vista Imágenes -->
            <div class="agenda-grid agenda-view-images">
                <?php
                while ( $events->have_posts() ) :
                    $events->the_post();
                    $event_date        = get_field( 'dates' );
                    $event_start_date  = $event_date[0]['start_date'];
                    $date_class        = strtolower( str_replace( ' ', '-', date_i18n( 'j M', strtotime( $event_start_date ) ) ) );

                    $terms            = get_the_terms( get_the_ID(), 'activity-type' );
                    $category_classes = '';
                    $parent_class     = 'festival';

                    if ( $terms && ! is_wp_error( $terms ) ) {
                        foreach ( $terms as $term ) {
                            $slug              = $term->slug;
                            $category_classes .= ' ' . sanitize_html_class( $slug );
                            if ( in_array( $slug, array( 'panel', 'conference', 'talk' ) ) ) {
                                $parent_class = 'symposium';
                            } elseif ( in_array( $slug, array( 'professional-meeting', 'professional-meetings' ) ) ) {
                                $parent_class = 'fair';
                            }
                        }
                    }

                    echo '<div class="agenda-thumb' . esc_attr( $category_classes ) . ' ' . esc_attr( $date_class ) . ' ' . esc_attr( $parent_class ) . '">';
                    get_template_part( 'template-parts/content-agenda' );
                    echo '</div>';

                endwhile;
                ?>
            </div>

            <!-- Vista Texto -->
            <div class="agenda-grid-text agenda-view-text" style="display:none;">
                <?php
                $events->rewind_posts();
                while ( $events->have_posts() ) :
                    $events->the_post();
                    $event_date        = get_field( 'dates' );
                    $event_start_date  = $event_date[0]['start_date'];
                    $date_class        = strtolower( str_replace( ' ', '-', date_i18n( 'j M', strtotime( $event_start_date ) ) ) );

                    $terms            = get_the_terms( get_the_ID(), 'activity-type' );
                    $category_classes = '';
                    $parent_class     = 'festival';

                    if ( $terms && ! is_wp_error( $terms ) ) {
                        foreach ( $terms as $term ) {
                            $slug              = $term->slug;
                            $category_classes .= ' ' . sanitize_html_class( $slug );
                            if ( in_array( $slug, array( 'panel', 'conference', 'talk' ) ) ) {
                                $parent_class = 'symposium';
                            } elseif ( in_array( $slug, array( 'professional-meeting', 'professional-meetings' ) ) ) {
                                $parent_class = 'fair';
                            }
                        }
                    }
                  
                    // Vista lista (texto)
                    echo '<div class="agenda-text-item agenda-list' . esc_attr( $category_classes ) . ' ' . esc_attr( $date_class ) . ' ' . esc_attr( $parent_class ) . '"">';
                    get_template_part( 'template-parts/content-agenda-text' );
                    echo '</div>';

                endwhile;
                ?>
            </div>
        <?php else : ?>
            <h2><?php _e( 'Sorry, no events were found in 2024.', 'far_loop' ); ?></h2>
        <?php endif; ?>
    </div>
</div>

<!-- Isotope + filtros -->
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
    let isoImages = new Isotope('.agenda-view-images', {
        itemSelector: '.agenda-thumb',
        layoutMode: 'fitRows',
        filter: '.festival' // Aplicar filtro inicial
    });
    let isoText = new Isotope('.agenda-view-text', {
        itemSelector: '.agenda-text-item',
        layoutMode: 'fitRows',
        filter: '.festival' // Aplicar filtro inicial
    });

    let categoryFilter = '.festival';
    let dateFilter = '';

    // ===== Inicializar estado por defecto =====
    // Marcar "Festival" como activo
    document.querySelectorAll(".agenda-categories span").forEach(c => c.classList.remove("is-active"));
    let festivalCat = document.querySelector(".agenda-categories span[data-filter='.festival']");
    if (festivalCat) festivalCat.classList.add("is-active");

    // Mostrar solo las fechas de festival
    document.querySelectorAll(".agenda-dates").forEach(d => {
        d.style.display = "none";
        d.classList.remove("show");
    });
    let defaultDates = document.querySelector(".agenda-dates-festival");
    if (defaultDates) {
        defaultDates.style.display = "flex";
        setTimeout(() => defaultDates.classList.add("show"), 10);

        // Asegurar que "All Dates" esté activo
        defaultDates.querySelectorAll("span").forEach(s => s.classList.remove("is-active"));
        let allDates = defaultDates.querySelector("span[data-filter='']");
        if (allDates) allDates.classList.add("is-active");
    }

    // ===== Click en categorías =====
    document.querySelectorAll(".agenda-categories span").forEach(cat => {
        cat.addEventListener("click", function(){
            document.querySelectorAll(".agenda-categories span").forEach(c => c.classList.remove("is-active"));
            this.classList.add("is-active");
            categoryFilter = this.getAttribute("data-filter");
            dateFilter = '';

            let finalFilter = categoryFilter;
            isoImages.arrange({ filter: finalFilter });
            isoText.arrange({ filter: finalFilter });

            // Ocultar todas las fechas
            document.querySelectorAll(".agenda-dates").forEach(d => {
                d.style.display = "none";
                d.classList.remove("show");
                d.querySelectorAll("span").forEach(s => s.classList.remove("is-active"));
                let allDates = d.querySelector("span[data-filter='']");
                if (allDates) allDates.classList.add("is-active");
            });

            // Mostrar fechas correspondientes con fade-in
            let targetDates;
            if (categoryFilter === '.festival') targetDates = document.querySelector(".agenda-dates-festival");
            if (categoryFilter === '.fair') targetDates = document.querySelector(".agenda-dates-fair");
            if (categoryFilter === '.symposium') targetDates = document.querySelector(".agenda-dates-symposium");

            if (targetDates) {
                targetDates.style.display = "flex";
                setTimeout(() => targetDates.classList.add("show"), 10);
            }
        });
    });

    // ===== Click en fechas =====
    document.querySelectorAll(".agenda-dates span").forEach(date => {
        date.addEventListener("click", function(){
            const parentDates = this.closest(".agenda-dates");
            parentDates.querySelectorAll("span").forEach(s => s.classList.remove("is-active"));
            this.classList.add("is-active");
            dateFilter = this.getAttribute("data-filter");

            let finalFilter = categoryFilter;
            if (dateFilter) finalFilter += dateFilter;
            isoImages.arrange({ filter: finalFilter });
            isoText.arrange({ filter: finalFilter });
        });
    });

    // ===== Toggle vista =====
    document.getElementById("toggle-view").addEventListener("click", function(){
        const mode = this.getAttribute("data-mode");
        if (mode === "images") {
            document.querySelector(".agenda-view-images").style.display = "none";
            document.querySelector(".agenda-view-text").style.display = "block";
            isoText.layout();
            this.setAttribute("data-mode", "text");
            this.textContent = "Grid View";
        } else {
            document.querySelector(".agenda-view-text").style.display = "none";
            document.querySelector(".agenda-view-images").style.display = "block";
            isoImages.layout();
            this.setAttribute("data-mode", "images");
            this.textContent = "List View";
        }
    });
});
</script>


<?php get_footer(); ?>
