<?php
/**
 * Template Part: Tabbed Magazine Section
 *
 * Displays a tabbed category-based post feed on the front page.
 * Free version: up to 3 tabs, 4 posts per tab.
 * Pro plugin can extend tabs, posts count, and layout via filters.
 *
 * @package Blog_Over
 */

// Check if enabled
if (!get_theme_mod('blog_over_tabbed_magazine_enable', false)) {
    return;
}

// Only show on front page / posts page
// During Customizer preview, bypass the page guard so the pencil icon renders
if (!is_customize_preview() && !is_front_page() && !is_home()) {
    return;
}


// Get settings
$section_title = get_theme_mod('blog_over_tabbed_magazine_title', __('Around The Web', 'blog-over'));
$posts_per_tab = (int) get_theme_mod('blog_over_tabbed_magazine_posts', 4);
$posts_per_tab = max(2, min(apply_filters('blog_over_tabbed_magazine_max_posts', 6), $posts_per_tab));

// Pro: Grid columns ('blog_over_tabbed_grid_columns' set by Pro Kirki field)
$grid_cols     = (int) get_theme_mod('blog_over_tabbed_grid_columns', 2);
$grid_cols     = max(2, min(4, $grid_cols)); // clamp to 2-4

// Pro: Card style
$card_style    = get_theme_mod('blog_over_tabbed_card_style', 'default');
$card_style    = in_array($card_style, array('default', 'overlay', 'minimal'), true) ? $card_style : 'default';

// Build tabs: repeater field returns array of [ label, category_slug ]
$tabs_raw = get_theme_mod('blog_over_tabbed_magazine_tabs', array());

// Default tabs if none saved
if (empty($tabs_raw) || !is_array($tabs_raw)) {
    $default_cats = get_categories(array('number' => 3, 'hide_empty' => true));
    $tabs_raw = array();
    foreach ($default_cats as $cat) {
        $tabs_raw[] = array(
            'tab_label'    => $cat->name,
            'tab_category' => $cat->slug,
        );
    }
}

// Allow Pro to filter tabs
$tabs_raw = apply_filters('blog_over_tabbed_magazine_tabs', $tabs_raw);

// Free: 3 tabs max. Pro plugin hooks 'blog_over_tabbed_magazine_max_tabs' to raise this.
$max_tabs = apply_filters('blog_over_tabbed_magazine_max_tabs', 3);
$tabs     = array_slice($tabs_raw, 0, $max_tabs);

if (empty($tabs)) {
    return;
}
?>

<?php
$section_width = get_theme_mod('blog_over_tabbed_magazine_section_width', 'boxed');
$container_class = ($section_width === 'full-width') ? 'blog-over-container blog-over-container-wide' : 'blog-over-container';
?>
<section class="blog-over-tabbed-magazine" aria-label="<?php esc_attr_e('Tabbed Magazine', 'blog-over'); ?>">
    <div class="<?php echo esc_attr($container_class); ?>">

        <?php $tabs_position = get_theme_mod('blog_over_tabbed_nav_position', 'right'); ?>
        <div class="blog-over-tabbed-magazine-header pos-<?php echo esc_attr($tabs_position); ?>">
            <?php if ($section_title) : ?>
                <div class="blog-over-section-heading-wrap">
                    <h2 class="blog-over-section-heading blog-over-tabbed-magazine-title">
                        <?php echo esc_html($section_title); ?>
                    </h2>
                </div>
            <?php endif; ?>

            <nav class="blog-over-tabbed-nav-wrapper" aria-label="<?php esc_attr_e('Category tabs', 'blog-over'); ?>">
                <ul class="blog-over-tabbed-nav" role="tablist">
                    <?php foreach ($tabs as $i => $tab) :
                        $tab_id  = 'blog-over-tab-panel-' . $i;
                        $btn_id  = 'blog-over-tab-btn-' . $i;
                        $label   = !empty($tab['tab_label']) ? $tab['tab_label'] : '';
                        $is_active = ($i === 0);
                    ?>
                        <li class="blog-over-tabbed-nav-item" role="presentation">
                            <button
                                id="<?php echo esc_attr($btn_id); ?>"
                                class="blog-over-tabbed-nav-btn<?php echo $is_active ? ' active' : ''; ?>"
                                role="tab"
                                aria-selected="<?php echo $is_active ? 'true' : 'false'; ?>"
                                aria-controls="<?php echo esc_attr($tab_id); ?>"
                                data-tab="<?php echo esc_attr($tab_id); ?>"
                            >
                                <?php echo esc_html($label); ?>
                            </button>
                        </li>
                    <?php endforeach; ?>
                </ul>
            </nav>
        </div>

        <div class="blog-over-tabbed-panels">
            <?php foreach ($tabs as $i => $tab) :
                $tab_id       = 'blog-over-tab-panel-' . $i;
                $cat_slug     = !empty($tab['tab_category']) ? sanitize_title($tab['tab_category']) : '';
                $is_active    = ($i === 0);

                // Build query
                $query_args = array(
                    'posts_per_page' => $posts_per_tab,
                    'ignore_sticky_posts' => 1,
                    'post_status' => 'publish',
                );

                if ($cat_slug) {
                    $query_args['category_name'] = $cat_slug;
                }

                // Allow Pro to customise query args per tab
                $query_args = apply_filters('blog_over_tabbed_magazine_query_args', $query_args, $tab, $i);

                $tab_query = new WP_Query($query_args);
            ?>
                <div
                    id="<?php echo esc_attr($tab_id); ?>"
                    class="blog-over-tabbed-panel<?php echo $is_active ? ' active' : ''; ?>"
                    role="tabpanel"
                    aria-labelledby="blog-over-tab-btn-<?php echo esc_attr($i); ?>"
                    <?php echo !$is_active ? 'hidden' : ''; ?>
                >
                    <?php if ($tab_query->have_posts()) : ?>
                        <div class="blog-over-tabbed-grid cols-<?php echo esc_attr($grid_cols); ?> style-<?php echo esc_attr($card_style); ?>">
                            <?php while ($tab_query->have_posts()) : $tab_query->the_post();
                                $cats = get_the_category();
                            ?>
                                <article class="blog-over-tabbed-card" id="tab-post-<?php the_ID(); ?>">

                                    <?php if (has_post_thumbnail()) : ?>
                                        <div class="blog-over-tabbed-card-thumb">
                                            <a href="<?php the_permalink(); ?>" tabindex="-1">
                                                <?php the_post_thumbnail('blog-over-medium'); ?>
                                            </a>
                                        </div>
                                    <?php else : ?>
                                        <div class="blog-over-tabbed-card-thumb-placeholder">
                                            <i class="fas fa-newspaper" aria-hidden="true"></i>
                                        </div>
                                    <?php endif; ?>

                                    <div class="blog-over-tabbed-card-content">
                                        <?php if (!empty($cats)) : ?>
                                            <a
                                                href="<?php echo esc_url(get_category_link($cats[0]->term_id)); ?>"
                                                class="blog-over-tabbed-card-cat"
                                            >
                                                <?php echo esc_html($cats[0]->name); ?>
                                            </a>
                                        <?php endif; ?>

                                        <h3 class="blog-over-tabbed-card-title">
                                            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                                        </h3>

                                        <div class="blog-over-tabbed-card-meta">
                                            <span>
                                                <i class="fas fa-calendar-alt" aria-hidden="true"></i>
                                                <?php echo esc_html(get_the_date()); ?>
                                            </span>
                                        </div>
                                    </div>

                                </article>
                            <?php endwhile; ?>
                        </div>
                    <?php else : ?>
                        <p class="blog-over-tabbed-no-posts">
                            <?php esc_html_e('No posts found in this category.', 'blog-over'); ?>
                        </p>
                    <?php endif; ?>

                    <?php wp_reset_postdata(); ?>
                </div>

            <?php endforeach; ?>
        </div>

    </div>
</section>
