<?php get_header(); ?>
<style>
    .achieving-insights .search-result {
        border: none;
    }

    /* Match blog listing card style */
    .achieving-insights .list-box {
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 2px 16px rgba(0,0,0,.07);
        transition: box-shadow .3s ease;
    }

    .achieving-insights .list-box:hover {
        box-shadow: 0 6px 28px rgba(0,0,0,.14);
    }

    .achieving-insights .image-box {
        border-radius: 15px 15px 0 0;
        overflow: hidden;
        height: 216px;
    }

    .achieving-insights .image-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .3s ease;
    }

    .achieving-insights .list-box:hover .image-box img {
        transform: scale(1.04);
    }

    .achieving-insights .desc-box {
        border-radius: 0 0 15px 15px;
    }
</style>
<section class="achieving-insights py-120 pt-5" style="margin-top:72px">
    <div class="container">

        <div class="search-result">
            <div class="row" id="case-studies-wrapper">

                <?php if (have_posts()) : ?>

                    <?php while (have_posts()) : the_post(); ?>

                        <div class="col-12 col-md-6 col-lg-4 mb-4">
                            <a href="<?php the_permalink(); ?>">
                                <div class="list-box h-100">
                                    <div class="image-box">
                                        <img class="w-100"
                                            src="<?php echo get_the_post_thumbnail_url(get_the_ID(), 'large'); ?>"
                                            alt="<?php the_title(); ?>" />
                                    </div>
                                    <div class="desc-box bg-white p-3">
                                        <div class="title-txt font-18">
                                            Case Study | <?php echo get_the_date('d M Y'); ?>
                                        </div>
                                        <div class="desc-txt font-20 text-semi font-light-black mt-2">
                                            <?php the_title(); ?>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>

                    <?php endwhile; ?>

                <?php else : ?>
                    <p>No Case Studies Found.</p>
                <?php endif; ?>

            </div>
        </div>

        <?php
        global $wp_query;
        $max_pages = $wp_query->max_num_pages;
        ?>

        <?php if ($max_pages > 1) : ?>
            <div class="text-center mt-4">
                <button id="load-more"
                    data-page="1"
                    data-max-pages="<?php echo $max_pages; ?>"
                    class="mt-4 px-4 font-16 text-medium talk-btn black-btn d-flex align-items-center justify-content-center mx-auto">
                    Load More
                </button>
            </div>
        <?php endif; ?>


    </div>
</section>

<?php get_footer(); ?>
<script>
document.addEventListener("DOMContentLoaded", function () {
    jQuery(function($) {

        let button = $('#load-more');

        if (!button.length) return;

        let currentPage = parseInt(button.data('page'));
        let maxPages = parseInt(button.data('max-pages'));

        button.on('click', function() {

            $.ajax({
                url: "<?php echo admin_url('admin-ajax.php'); ?>",
                type: 'POST',
                data: {
                    action: 'load_more_case_studies',
                    page: currentPage + 1
                },
                beforeSend: function() {
                    button.text('Loading...');
                },
                success: function(response) {

                    if (response.trim() !== '') {

                        $('#case-studies-wrapper').append(response);

                        currentPage++;
                        button.data('page', currentPage);
                        button.text('Load More');
                        if (currentPage >= maxPages) {
                            button.remove();
                        }

                    } else {
                        button.remove();
                    }
                }
            });

        });

    });
});
</script>