<?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="white-papers-wrapper">

                <?php if (have_posts()) : ?>
                    <?php while (have_posts()) : the_post(); ?>
                        <?php
                        $pdf_field = get_field('attach_whitepaper_pdf');
                        $pdf_id    = is_array($pdf_field) ? $pdf_field['ID'] : $pdf_field;
                        ?>
                        <div class="col-12 col-md-6 col-lg-4 mb-4">
                            <div class="list-box h-100">
                                <div class="image-box">
                                    <img class="w-100"
                                        src="<?php echo esc_url(get_the_post_thumbnail_url(get_the_ID(), 'large')); ?>"
                                        alt="<?php the_title_attribute(); ?>" />
                                </div>
                                <div class="desc-box bg-white p-3">
                                    <div class="d-flex justify-content-between align-items-center title-txt font-18">
                                        White Papers | <?php echo get_the_date('d M Y'); ?>
                                        <?php if ($pdf_id) : ?>
                                            <a href="#"
                                                class="download-pdf-btn"
                                                data-pdf-id="<?php echo esc_attr($pdf_id); ?>"
                                                data-post-id="<?php echo esc_attr(get_the_ID()); ?>"
                                                data-title="<?php echo esc_attr(get_the_title()); ?>">
                                                Download PDF
                                            </a>
                                        <?php endif; ?>
                                    </div>
                                    <div class="desc-txt font-20 text-semi font-light-black mt-2">
                                        <?php the_title(); ?>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <?php endwhile; ?>
                <?php else : ?>
                    <p>No White Papers 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 include get_template_directory() . '/inc/wp-whitepaper-modal.php'; ?>
<?php get_footer(); ?>

<script>
document.addEventListener("DOMContentLoaded", function () {
    jQuery(function($) {

        /* ─── Load More ─────────────────────────────────────────── */
        let button = $('#load-more');

        if (button.length) {
            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_white_papers',
                        page: currentPage + 1
                    },
                    beforeSend: function() {
                        button.text('Loading...');
                    },
                    success: function(response) {
                        if (response.trim() !== '') {
                            $('#white-papers-wrapper').append(response);
                            currentPage++;
                            button.data('page', currentPage);
                            button.text('Load More');
                            if (currentPage >= maxPages) button.remove();
                        } else {
                            button.remove();
                        }
                    }
                });
            });
        }

    });
});
</script>