<?php
function homeServ_shortcode() {
    ob_start(); // Start output buffering

    // Enqueue Swiper.js if not already added
    wp_enqueue_style('swiper-css', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css');
    wp_enqueue_script('swiper-js', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js', array('jquery'), '', true);

    $news_args = array(
        'post_type'      => 'page',
        'posts_per_page' => 7, 
        'page_category'  => 'areas-of-research',
        'order'          => 'desc',
    );

    $news_query = new WP_Query($news_args);
    
    if ($news_query->have_posts()) : ?>

        <div class="swiper-container home-services-slider">
            <div class="swiper-wrapper">
                <?php while ($news_query->have_posts()) : $news_query->the_post(); ?>
                    <div class="swiper-slide">
                        <article class="kpy-services">
                            <a href="<?= esc_url(get_permalink()); ?>" class="p-0">
                                <div class="card card-body shadow mb-3 border-0 justify-content-between" data-aos="fade-up">
                                    <h3><?php the_title(); ?></h3>
                                    <a href="<?= esc_url(get_permalink()); ?>" class="btn btn-sm btn-primary">See Details  </a>
                                </div>
                            </a>
                        </article>
                    </div>
                <?php endwhile; wp_reset_postdata(); ?>
            </div>

            <!-- Navigation Arrows -->
            <div class="swiper-button-prev d-none"></div>
            <div class="swiper-button-next d-none"></div>

            <!-- Pagination -->
            <div class="swiper-pagination"></div>
        </div>

        <script>
        document.addEventListener("DOMContentLoaded", function() {
            var swiper = new Swiper(".home-services-slider", {
                slidesPerView: 5,
                spaceBetween: 20,
                loop: true,
                autoplay: {
                    delay: 5000,
                    disableOnInteraction: false
                },
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                },
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
                breakpoints: {
                    1024: { slidesPerView: 5 },
                    768: { slidesPerView: 3 },
                    0: { slidesPerView: 2 },
                }
            });
        });
        </script>

        <style>
            .swiper-container {
                width: 100%;
                padding: 20px 0;
            }
            .swiper-slide {
                display: flex;
                justify-content: center;
            }
            .swiper-button-prev, .swiper-button-next {
                color: #333; /* Arrow color */
               
            }
            .swiper-pagination {
                position: relative;
                bottom: 10px;
                display: none;
            }
        </style>

    <?php endif;

    return ob_get_clean(); // Return the buffered content
}

// Register the shortcode
add_shortcode('home-research_areas', 'homeServ_shortcode');
