<?php
$paged = get_query_var('paged') ? get_query_var('paged') : 1;
$search_query = get_query_var('s'); // Get search term

$args = [
    'post_type'      => 'course',
    'post_status'    => 'publish',
    'posts_per_page' => 10,
    'paged'          => $paged,
    'orderby'        => 'relevance', // Ensures Relevanssi sorting is applied
];

// Apply search term if present
if (!empty($search_query)) {
    $args['s'] = $search_query;
    add_filter('relevanssi_modify_wp_query', function ($query) {
        $query->query_vars['relevanssi'] = true;
        return $query;
    });
}

$query = new WP_Query($args);

if ($query->have_posts()) : ?>
    <div class="course-list">
        <?php while ($query->have_posts()) : $query->the_post(); ?>
            <div class="course-item">
                <div class="course-image">
                    <?php if (has_post_thumbnail()) : ?>
                        <a href="<?php the_permalink(); ?>">
                            <?php the_post_thumbnail('medium'); ?>
                        </a>
                    <?php else : ?>
                        <img src="https://via.placeholder.com/300x200" alt="Placeholder">
                    <?php endif; ?>
                </div>
                <div class="course-details">
                    <h3 class="course-title">
                        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                        <span class="course-price"><?php echo do_shortcode('[sensei_course_product_price]'); ?></span>
                    </h3>
                    <p class="course-meta">
                        <?php echo do_shortcode('[sensei_course_lesson_count]'); ?> in
                        <?php
                        $categories = get_the_term_list(get_the_ID(), 'course-category', '', ', ', '');
                        if ($categories) {
                            echo '<span class="course-categories">' . $categories . '</span>';
                        }
                        ?>
                    </p>
                    <p class="course-excerpt"><?php echo wp_trim_words(get_the_excerpt(), 30, '...'); ?></p>
                </div>
            </div>
        <?php endwhile; ?>
    </div>

    <?php if ($query->max_num_pages > 1) : ?>
        <div class="pagination">
            <?php
            echo paginate_links([
                'total'   => $query->max_num_pages,
                'current' => $paged,
                'format'  => '?paged=%#%',
                'prev_text' => '« Previous',
                'next_text' => 'Next »',
            ]);
            ?>
        </div>
    <?php endif; ?>

    <?php wp_reset_postdata(); ?>
<?php else : ?>
    <p>No courses found.</p>
<?php endif; ?>

.course-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
    padding: 0;
}

.course-item {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    padding-bottom: 20px;
}

.course-image img {
    width: 200px; /* Adjust image width */
    height: auto;
    border-radius: 5px;
}

.course-details {
    flex: 1;
}

.course-title {
    font-size: 20px;
    margin: 0 0 10px;
    font-weight: bold;
}

.course-title a {
    color: #325994;
    text-decoration: none;
    transition: color 0.3s ease;
}

.course-title a:hover {
    color: red;
    text-decoration: none;
}

.course-price {
    font-size: 16px; /* Smaller font size for price */
    font-weight: bold;
    margin-left: 10px;
    color: red;
}

.course-meta {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

.course-excerpt {
    font-size: 16px;
    color: #333;
}

.pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.pagination a {
    color: #325994;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.pagination a:hover {
    background-color: red;
    color: white;
}

.pagination .current {
    background-color: #325994;
    color: white;
    font-weight: bold;
    padding: 8px 12px;
    border-radius: 5px;
    text-decoration: none;
}
.course-categories a {
    font-style: italic;
    text-decoration: underline;
    color: #666; /* Change to your preferred color */
}

.course-categories a:hover {
    color: #00b0f4; /* Change hover color if needed */
    text-decoration: none;
}