<?php
/**
 * Template for displaying course archives
 *
 * @package Nihongo
 */

get_header(); ?>

<main id="main" class="site-main">
    <!-- Archive Hero Section -->
    <section class="archive-hero">
        <div class="archive-hero-background">
            <img src="<?php echo get_template_directory_uri(); ?>/assets/img/cc1.jpg" alt="<?php echo nihongo_translate('courses'); ?>" class="archive-hero-image">
            <div class="archive-hero-overlay"></div>
        </div>
        <div class="container">
            <div class="archive-hero-content">
                <h1 class="archive-hero-title"><?php echo nihongo_translate('courses'); ?></h1>
                <p class="archive-hero-subtitle"><?php echo nihongo_translate('course_list_subtitle'); ?></p>
            </div>
        </div>
    </section>

    <!-- Course Filter Section -->
    <section class="section course-filters">
        <div class="container">
            <div class="filter-controls">
                <div class="filter-group">
                    <label for="level-filter"><?php echo nihongo_translate('filter_by_level'); ?>:</label>
                    <select id="level-filter" class="filter-select">
                        <option value=""><?php echo nihongo_translate('all_levels'); ?></option>
                        <option value="beginner"><?php echo nihongo_translate('beginner'); ?></option>
                        <option value="intermediate"><?php echo nihongo_translate('intermediate'); ?></option>
                        <option value="advanced"><?php echo nihongo_translate('advanced'); ?></option>
                    </select>
                </div>
                
                <div class="filter-group">
                    <label for="category-filter"><?php echo nihongo_translate('filter_by_category'); ?>:</label>
                    <select id="category-filter" class="filter-select">
                        <option value=""><?php echo nihongo_translate('all_categories'); ?></option>
                        <?php
                        $categories = get_terms(array(
                            'taxonomy' => 'course_category',
                            'hide_empty' => false,
                        ));
                        foreach ($categories as $category) :
                        ?>
                            <option value="<?php echo esc_attr($category->slug); ?>"><?php echo esc_html($category->name); ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>
        </div>
    </section>

    <!-- Courses Grid Section -->
    <section class="section">
        <div class="container">
            <div class="courses-grid" id="courses-container">
                <?php if (have_posts()) : ?>
                    <?php while (have_posts()) : the_post(); ?>
                        <?php
                        $level = get_post_meta(get_the_ID(), '_course_level', true);
                        $duration = get_post_meta(get_the_ID(), '_course_duration', true);
                        $price = get_post_meta(get_the_ID(), '_course_price', true);
                        $categories = get_the_terms(get_the_ID(), 'course_category');
                        ?>
                        
                        <div class="course-card" data-level="<?php echo esc_attr(strtolower($level)); ?>" data-categories="<?php echo esc_attr(implode(' ', wp_list_pluck($categories ?: array(), 'slug'))); ?>">
                            <div class="course-image">
                                <?php if (has_post_thumbnail()) : ?>
                                    <a href="<?php the_permalink(); ?>">
                                        <?php the_post_thumbnail('course-thumbnail'); ?>
                                    </a>
                                <?php else : ?>
                                    <a href="<?php the_permalink(); ?>">
                                        <img src="<?php echo get_template_directory_uri(); ?>/assets/img/cc1.jpg" alt="<?php the_title(); ?>">
                                    </a>
                                <?php endif; ?>
                            </div>
                            <div class="course-content">
                                <h3 class="course-title">
                                    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                                </h3>
                                <p class="course-description"><?php echo get_the_excerpt(); ?></p>
                                <div class="course-meta">
                                    <?php if ($level) : ?>
                                        <span class="course-level"><?php echo esc_html($level); ?></span>
                                    <?php endif; ?>
                                    <?php if ($duration) : ?>
                                        <span class="course-duration"><?php echo esc_html($duration); ?></span>
                                    <?php endif; ?>
                                </div>
                                <?php if ($price) : ?>
                                    <div class="course-price"><?php echo esc_html($price); ?></div>
                                <?php endif; ?>
                            </div>
                        </div>
                    <?php endwhile; ?>
                <?php else : ?>
                    <div class="no-courses">
                        <h3><?php echo nihongo_translate('no_courses_found'); ?></h3>
                        <p><?php echo nihongo_translate('no_courses_message'); ?></p>
                    </div>
                <?php endif; ?>
            </div>

            <!-- Pagination -->
            <?php
            the_posts_pagination(array(
                'mid_size' => 2,
                'prev_text' => nihongo_translate('previous'),
                'next_text' => nihongo_translate('next'),
            ));
            ?>
        </div>
    </section>
</main>

<?php /* Moved inline archive filter JS to assets/js/main.js */ ?>

<?php get_footer(); ?>
