Untitled

/**
 * Resources Section Template
 * Add this to your theme's functions.php or template file
 */

function nie_render_resources_section() {
    // Get all resource categories
    $categories = get_terms(array(
        'taxonomy'   => 'resource-category',
        'hide_empty' => false,
    ));

    if (empty($categories) || is_wp_error($categories)) return;

    $first_cat = $categories[0];
    ob_start();
    ?> 

    <div class="nie-resources-wrap">

        <!-- Sidebar -->
        <aside class="nie-sidebar">
            <?php foreach ($categories as $cat) : ?>
                <div class="nie-sidebar-item" data-cat="<?php echo esc_attr($cat->term_id); ?>">
                    <span class="nie-sidebar-name"><?php echo esc_html($cat->name); ?></span>
                    <span class="nie-sidebar-count"><?php echo esc_html($cat->count); ?> Collections</span>
                </div>
            <?php endforeach; ?>
        </aside>

        <!-- Main Content -->
        <div class="nie-main">
            <h2 class="nie-cat-title" id="nie-active-title">
                <?php echo esc_html($first_cat->name); ?>
            </h2>

            <?php foreach ($categories as $cat) : 
                $posts = get_posts(array(
                    'post_type'      => 'resources',
                    'posts_per_page' => -1,
                    'tax_query'      => array(array(
                        'taxonomy' => 'resource-category',
                        'field'    => 'term_id',
                        'terms'    => $cat->term_id,
                    )),
                ));
            ?>
                <div class="nie-posts-grid" data-cat-grid="<?php echo esc_attr($cat->term_id); ?>" style="display:<?php echo $cat->term_id === $first_cat->term_id ? 'grid' : 'none'; ?>">
                    <?php if (!empty($posts)) : foreach ($posts as $post) :
                        $thumb = get_the_post_thumbnail_url($post->ID, 'medium');
                        $excerpt = get_the_excerpt($post->ID);
                        $link = get_permalink($post->ID);
                    ?>
                        <article class="nie-card">
                            <div class="nie-card-img">
                                <?php if ($thumb) : ?>
                                    <img src="<?php echo esc_url($thumb); ?>" alt="<?php echo esc_attr($post->post_title); ?>">
                                <?php else : ?>
                                    <div class="nie-card-img-placeholder"></div>
                                <?php endif; ?>
                            </div>
                            <div class="nie-card-body">
                                <h3 class="nie-card-title"><?php echo esc_html($post->post_title); ?></h3>
                                <?php if ($excerpt) : ?>
                                    <p class="nie-card-excerpt"><?php echo esc_html($excerpt); ?></p>
                                <?php endif; ?>
                                <a href="<?php echo esc_url($link); ?>" class="nie-card-link">Explore&nbsp;&rarr;</a>
                            </div>
                        </article>
                    <?php endforeach; else : ?>
                        <p class="nie-no-posts">No resources found in this category.</p>
                    <?php endif; ?>
                </div>
            <?php endforeach; ?>
        </div>
    </div>

    
    <script>
    (function () {
        const items = document.querySelectorAll('.nie-sidebar-item');
        const grids = document.querySelectorAll('.nie-posts-grid');
        const title = document.getElementById('nie-active-title');

        // ── Activate a category by ID ──
        function activateCat(catId) {
            items.forEach(function (el) { el.classList.remove('active'); });
            grids.forEach(function (grid) {
                grid.style.display = grid.dataset.catGrid === catId ? 'grid' : 'none';
            });
            const matchItem = document.querySelector('.nie-sidebar-item[data-cat="' + catId + '"]');
            if (matchItem) {
                matchItem.classList.add('active');
                if (title) title.textContent = matchItem.querySelector('.nie-sidebar-name').textContent;

                // Scroll sidebar item into view (for mobile horizontal scroll)
                matchItem.scrollIntoView({ block: 'nearest', inline: 'center', behavior: 'smooth' });
            }
        }

        // ── Click: sidebar item ──
        items.forEach(function (item) {
            item.addEventListener('click', function () {
                activateCat(this.dataset.cat);
            });
        });

        // ── Scroll: observe which grid enters the right-side viewport ──
        if ('IntersectionObserver' in window) {
            const observer = new IntersectionObserver(function (entries) {
                entries.forEach(function (entry) {
                    if (entry.isIntersecting) {
                        activateCat(entry.target.dataset.catGrid);
                    }
                });
            }, {
                root: null,          // viewport
                rootMargin: '0px',
                threshold: 0.4       // 40% of the grid must be visible to trigger
            });

            grids.forEach(function (grid) {
                // Make all grids visible so scroll can detect them
                grid.style.display = 'grid';
                observer.observe(grid);
            });

            // ✅ Re-apply first-item active state AFTER observer forces all grids visible
            if (items.length) {
                activateCat(items[0].dataset.cat);
            }

        } else {
            // Fallback for browsers without IntersectionObserver
            if (items.length) {
                activateCat(items[0].dataset.cat);
            }
        }

    })();
    </script>

    <?php
    return ob_get_clean();
}
add_shortcode('resources_section', 'nie_render_resources_section');