<?php
/* Agrega este código al archivo functions.php de tu tema hijo */

// 1. Shortcode para mostrar todos los eventos del año
function mostrar_calendario_anual() {
    ob_start(); // Iniciar buffer de salida
    
    // Fechas para el año actual
    $hoy = date('Y-m-d');
    $fin_de_año = date('Y-12-31');
    
    // Configuración básica
    echo '<div class="calendario-anual-wrapper">';
    
    // 2. Filtros por categoría
    echo '<div class="filtros-eventos">';
    echo '<h3>Filtrar por categoría:</h3>';
    echo '<button class="filtro-btn active" data-categoria="todas">Todos</button>';
    
    $categorias = get_terms([
        'taxonomy' => 'tribe_events_cat',
        'hide_empty' => true,
    ]);
    
    foreach ($categorias as $categoria) {
        echo '<button class="filtro-btn" data-categoria="' . esc_attr($categoria->slug) . '">' . esc_html($categoria->name) . '</button>';
    }
    
    echo '</div>';
    
    // 3. Vista de calendario anual
    echo '<div id="calendario-anual">';
    
    // Usar la función tribe_get_events para obtener todos los eventos del año
    $eventos = tribe_get_events([
        'posts_per_page' => -1,
        'start_date' => $hoy,
        'end_date' => $fin_de_año,
        'orderby' => 'event_date',
        'order' => 'ASC',
    ]);
    
    if ($eventos) {
        echo '<div class="lista-eventos-anual">';
        
        $mes_actual = '';
        foreach ($eventos as $evento) {
            $fecha_evento = tribe_get_start_date($evento, false, 'F Y');
            
            // Mostrar el mes como encabezado cuando cambie
            if ($mes_actual != $fecha_evento) {
                if ($mes_actual != '') echo '</div>'; // Cerrar el grupo anterior
                echo '<h3 class="mes-encabezado">' . $fecha_evento . '</h3>';
                echo '<div class="eventos-del-mes">';
                $mes_actual = $fecha_evento;
            }
            
            // Mostrar cada evento
            echo '<div class="evento-item" data-categorias="' . esc_attr(tribe_get_event_cat_slugs($evento->ID)) . '">';
            echo '<div class="fecha-evento">' . tribe_get_start_date($evento, false, 'j') . '</div>';
            echo '<div class="info-evento">';
            echo '<h4><a href="' . get_permalink($evento->ID) . '">' . get_the_title($evento->ID) . '</a></h4>';
            
            // Mostrar categorías
            $categorias_evento = tribe_get_event_categories($evento->ID);
            if ($categorias_evento) {
                echo '<div class="categorias-evento">' . $categorias_evento . '</div>';
            }
            
            echo '<div class="horario-evento">' . tribe_get_start_time($evento->ID) . ' - ' . tribe_get_end_time($evento->ID) . '</div>';
            echo '</div></div>';
        }
        echo '</div>'; // Cerrar el último grupo de eventos
    } else {
        echo '<p>No hay eventos programados para este año.</p>';
    }
    
    echo '</div></div>';
    
    // 4. JavaScript para filtros
    ?>
    <script>
    jQuery(document).ready(function($) {
        $('.filtro-btn').click(function() {
            $('.filtro-btn').removeClass('active');
            $(this).addClass('active');
            
            var categoria = $(this).data('categoria');
            
            if (categoria === 'todas') {
                $('.evento-item').show();
            } else {
                $('.evento-item').each(function() {
                    var categorias = $(this).data('categorias').split(',');
                    if (categorias.indexOf(categoria) !== -1) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                });
            }
        });
    });
    </script>
    <?php
    
    return ob_get_clean(); // Devolver el contenido del buffer
}
add_shortcode('calendario_anual_eventos', 'mostrar_calendario_anual');

// 5. Estilos CSS
function estilos_calendario_anual() {
    echo '<style>
    .calendario-anual-wrapper {
        max-width: 100%;
        margin: 0 auto;
        font-family: Arial, sans-serif;
    }
    
    .filtros-eventos {
        margin-bottom: 30px;
        text-align: center;
    }
    
    .filtro-btn {
        background: #f5f5f5;
        border: 1px solid #ddd;
        padding: 8px 15px;
        margin: 0 5px 10px;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s;
    }
    
    .filtro-btn.active, .filtro-btn:hover {
        background: #0073aa;
        color: white;
        border-color: #0073aa;
    }
    
    .mes-encabezado {
        background: #eaeaea;
        padding: 10px 15px;
        margin: 20px 0 10px;
        border-left: 4px solid #0073aa;
    }
    
    .eventos-del-mes {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 15px;
        margin-bottom: 30px;
    }
    
    .evento-item {
        border: 1px solid #eee;
        padding: 15px;
        border-radius: 5px;
        display: flex;
        transition: all 0.3s;
    }
    
    .evento-item:hover {
        box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    }
    
    .fecha-evento {
        background: #0073aa;
        color: white;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        font-weight: bold;
        border-radius: 50%;
        margin-right: 15px;
        flex-shrink: 0;
    }
    
    .info-evento {
        flex-grow: 1;
    }
    
    .info-evento h4 {
        margin: 0 0 5px;
    }
    
    .info-evento h4 a {
        color: #333;
        text-decoration: none;
    }
    
    .info-evento h4 a:hover {
        color: #0073aa;
    }
    
    .categorias-evento {
        font-size: 0.9em;
        color: #666;
        margin-bottom: 5px;
    }
    
    .horario-evento {
        font-size: 0.9em;
        color: #0073aa;
    }
    
    @media (max-width: 600px) {
        .eventos-del-mes {
            grid-template-columns: 1fr;
        }
    }
    </style>';
}
add_action('wp_head', 'estilos_calendario_anual');