<?php
/*
Template Name: Available Courses Archive
*/
get_header();
$slug = get_query_var('name'); // This will get 'isc2' from the URL
// echo 'The slug is: ' . $slug;
$taxonomy = 'course_category'; // Your custom taxonomy

// Fetch category details
$category = get_term_by('slug', $slug, $taxonomy);

if ($category) : ?>
<section class="sub-bnr training">
    <div class="container custom-container">
        <div class="inner-banner">
                <h1 class="main-title">
                <?php echo esc_html($category->name); ?>
                    <span class="red-color">Training Courses </span>
                </h1>
        </div>
    </div>
</section>

    <section class="training-courses">
        <div class="container custom-container">
            <div class="row">
                <div class="boxes">
                <?php
        // Fetch courses under this category
        $query = new WP_Query(array(
            'post_type' => 'sub_courses',
            'tax_query' => array(
                array(
                    'taxonomy' => $taxonomy,
                    'field'    => 'slug',
                    'terms'    => $slug,
                ),
            ),
            'orderby' => 'date',     // Moved outside tax_query
            'order'   => 'ASC',      // Moved outside tax_query
            'posts_per_page' => -1,    // Display all courses
        ));
        
        $additional_class = in_array($slug, ['ec-council-courses','isaca', 'isc2', 'comptia']) ? ' course_sec' : '';
        ?>

        <?php if ($query->have_posts()) : ?>
            <?php while ($query->have_posts()) : $query->the_post(); ?>
                    <div class="box1">
                        <div class="logo-sec">
                        <?php
                        // Fetch images
                        $images = get_post_meta(get_the_ID(), 'subcourse_images', true);

                        if (is_array($images) && !empty($images)) { ?>
                            <!-- Display the first image -->
                            <div class="img-sec<?php echo $additional_class; ?>">
                                <a href="<?php echo esc_url($images[0]); ?>" data-fancybox="gallery" class="open-gallery">
                                    <img src="<?php echo esc_url($images[0]); ?>" alt="">
                                </a>
                            </div>

                            <?php
                            // Render all remaining images as hidden links for the gallery
                            foreach ($images as $index => $image_url) {
                                if ($index === 0) continue; // Skip the first image since it's already displayed
                                echo '<a href="' . esc_url($image_url) . '" data-fancybox="gallery" style="display: none;"></a>';
                            }
                        }
                        ?>


                        </div>
                        <div class="text-sec">
                            <div class="box-title"><?php the_title(); ?></div>
                            <div class="contents"><?php the_content(); ?></div>
                            <div class="btn1"><a href="<?php echo esc_url(site_url('contact-us')); ?>" class="btn-more"><span class="txt">Learn More</span> <span><img src="<?php echo get_template_directory_uri(); ?>/img/arrow.svg" alt="arrow"></span></a></div>
                        </div>
                    </div>
                    <?php
                    endwhile;
                    wp_reset_postdata();
                else :
                    echo '<p>No sub-courses available for this course.</p>';
                endif;
                ?>
                </div>
            </div>
        </div>
    </section>
    <?php 
else : 
    echo "<p>Category not found.</p>";
endif;

get_footer(); ?>
<script>
jQuery(document).ready(function($) {
    Fancybox.bind("[data-fancybox='gallery']", {
        loop: true,
        closeButton: "inside", // Adds a close button inside the popup
        toolbar: true, // Ensures the toolbar is enabled
        buttons: ["close", "zoom", "slideShow", "thumbs", "download"], // Buttons to show in the gallery
    });
});
</script>