<?php
$conn = mysqli_connect('localhost', 'root', 'indev@123', 'bharat_impact');
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Social Entrepreneurs Community</title>
    <?php include("include/links.php"); ?>
</head>

<body>
    <?php include("include/header.php"); ?>

    <section class="about-us py-5" id="jubilant-bhartia-group">
        <div class="container">
            <div id="record-count"></div> 
            <div id="pagination-data"></div> 
            <div class="pagination mt-4" id="pagination-links"></div> 
        </div>
    </section>

    <?php include("include/footer.php"); ?>
    <?php include("include/script.php"); ?>

    <!-- AJAX for Pagination -->
    <!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->
    <script>
        function loadData(page) {
            $.ajax({
                url: "ajax/ajax_pagination.php",
                type: "GET",
                data: {
                    page: page
                },
                dataType: "json",
                success: function(response) {
                    console.log(response);
                    $('#record-count').html(response.record_count);
                    $('#pagination-data').html(response.data);
                    $('#pagination-links').html(response.pagination);
                }
            });
        }

        $(document).ready(function() {
            loadData(1);
        });

        $(document).on("click", ".page-link", function(e) {
            e.preventDefault();
            const page = $(this).data("page");
            loadData(page);
        });
    </script>
</body>

</html>