<?php
    require_once 'include/functions.php';
    while($tab = mysqli_fetch_array($AppMHQry)):
        include 'include/header.php';
        include 'include/breadcrumbs.php';
        // 1. Pagination Settings
        $limit = 24; // Number of children per page
        $pagination = isset($_GET['children_page']) ? (int)$_GET['children_page'] : 1;
        if ($pagination < 1) $pagination = 1;
        $offset = ($pagination - 1) * $limit;

        // 2. Get Total Records for pagination calculation
        $total_results = $conn->query("SELECT COUNT(*) as id FROM children")->fetch_assoc();
        $total_pages = ceil($total_results['id'] / $limit);

        // 3. Fetch Paginated Results
        $query = "SELECT * FROM `children` ORDER BY `is_sponsored` ASC, `id` ASC LIMIT $limit OFFSET $offset";
        $result = $conn->query($query);
?>
  <!-- Breadcrumb  Section
    ============================--> 
    <section id="child_sponsorship" class="child_sponsorship section">
      <div class="container aos-init aos-animate" data-aos="fade-up" data-aos-delay="100">

        <!-- Header & Intro Row -->
        <div class="row mb-5">
          <div class="col-lg-6 aos-init aos-animate" data-aos="fade-right" data-aos-delay="200">
            <h3 class="section-subtitle">Make a Difference</h3>
            <h2 class="section-heading">Sponsor a Child & Change a Life Forever</h2>
            <p class="section-description">With just <b>$45/ Month or $540 / Year</b>, you can give a child the opportunity to go to school and build a brighter future. Your sponsorship provides access to education and the chance for a child to break the cycle of poverty. Sponsor a child today and witness the life-changing impact of your generosity.</p>
            
            <!-- Impact Stats Counters -->
            <div class="stats-container mt-4">
              <div class="row">
                <div class="col-md-4 col-6">
                  <div class="stat-item">
                    <h3>20+</h3>
                    <p>Children Sponsored</p>
                  </div>
                </div>
                <div class="col-md-4 col-6">
                  <div class="stat-item">
                    <h3>10+</h3>
                    <p>Communities Served</p>
                  </div>
                </div>
                <div class="col-md-4 col-6">
                  <div class="stat-item">
                    <h3>100%</h3>
                    <p>Direct Impact</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- Visual Element Column -->
          <div class="col-lg-6 aos-init aos-animate" data-aos="fade-left" data-aos-delay="300">
            <div class="about-image">
              <img src="assets/img/advanced-feature-1.jpg" alt="Child Sponsorship Impact" class="img-fluid rounded">
            </div>
          </div>

          <div class="col-lg-12 mx-auto my-5">
            <div class="child_sponsorship-card">
              <div class="row align-items-center">
                <div class="col-lg-5 mb-4 mb-lg-0 aos-init aos-animate" data-aos="fade-right" data-aos-delay="100">
                  <div class="child_sponsorship-image">
                    <img src="assets/img/advanced-feature-1.jpg" alt="Child Sponsorship" class="img-fluid">
                    <div class="program-label">
                      <span>Sponsor Now</span>
                    </div>
                  </div>
                </div>
                <div class="col-lg-7 aos-init aos-animate" data-aos="fade-left" data-aos-delay="200">
                  <div class="child_sponsorship-content">
                    <h3 class="fw-bold mb-2">How do I keep track of my sponsorship?</h3>
                    <p>We keep you closely connected to your sponsored child every step of the way. You will receive their photo, background information about their family and community, regular updates on their education and wellbeing, and personal letters that share their journey and progress.</p>

                    <div class="program-highlights">
                      <div class="highlight">
                        <div class="highlight-icon">
                          <i class="fa fa-clock"></i>
                        </div>
                        <div class="highlight-info">
                          <h4>Children Sponsored</h4>
                          <p>20+</p>
                        </div>
                      </div>
                      <div class="highlight">
                        <div class="highlight-icon">
                          <i class="fa fa-sack-dollar"></i>
                        </div>
                        <div class="highlight-info">
                          <h4>Communities Served</h4>
                          <p>10+</p>
                        </div>
                      </div>
                      <div class="highlight">
                        <div class="highlight-icon">
                          <i class="fa fa-chart-line"></i>
                        </div>
                        <div class="highlight-info">
                          <h4>Direct Impact</h4>
                          <p>100%</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <hr class="my-5" style="border-top: 1px dashed #ccc; opacity: 0.5;">
      </div>
    </section>

    <div class="container-fluid" id="sponsorship-container">
        <div class="container section-title aos-init aos-animate" data-aos="fade-up">
            <h2>Children Awaiting Sponsorship</h2>
            <p>Child sponsorship connects you with a vulnerable child, allowing you to support their education, basic needs, and wellbeing through a monthly or annual contribution. Beyond this, your support helps build their confidence and leadership, empowering them to create a better future for themselves and their community.</p>
        </div>
        <div class="row justify-content-center">
            <?php while($row = $result->fetch_assoc()): ?>
            <div class="col-md-4 col-lg-3 mb-4">
                <div class="card">
                  <?php if($row['is_sponsored']): ?>
                    <div class="sponsored-tag">Sponsored</div>
                  <?php endif; ?>
                    
                    <img src="<?= image_loop('children',$row['id']); ?>" class="card-img-top" alt="Child Image">
                    <div class="card-body p-0">
                        <div class="announcement-slider bg-light swiper init-swiper">
                          <script type="application/json" class="swiper-config">
                            {
                              "loop": true,
                              "speed": 600,
                              "autoplay": {
                                "delay": 5000
                              },
                              "slidesPerView": 1,
                              "direction": "vertical",
                              "effect": "slide"
                            }
                          </script>
                          <div class="swiper-wrapper">
                            <div class="swiper-slide"><i class="fa fa-hand-holding-heart"></i> Sponsor Me</div>
                            <div class="swiper-slide"><i class="fa fa-briefcase"></i> I want to be a <b class="text-uppercase fw-bold"><?= $row['occupation'] ?></b></div>
                            <div class="swiper-slide"><i class="fa fa-hand-holding-heart"></i> Am just <?= calculateAge($row['age']) ?> Years Old</div>
                          </div>
                        </div>
                    </div>
                    <div class="card-body child-info">
                        <h4><?= $row['name'] ?></h4>
                        <p class="gender">Gender: <?= getChildGender(calculateAge($row['age']), $row['sex'])  ?></p>
                        <p><?= $row['description_short'] ?></p>
                    </div>
                    <div class="card-footer bg-white py-3">
                        <div class="child-sponsor-cta d-flex justify-content-between">
                            <a href="child_sponsorship_details.php?child_id=<?= $row['id'] ?>" class="program-link">View Details <i class="fa fa-arrow-right text-dark"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            <?php endwhile; ?>
        </div>
        <section id="pagination-2" class="pagination-2 section">
          <div class="container">

            <nav class="d-flex justify-content-center" aria-label="Page navigation">
                <ul>
                    <li class="<?= ($pagination <= 1) ? 'disabled' : '' ?>">
                        <a class="page-link" href="?children_page=<?= $pagination - 1 ?>#sponsorship-container" aria-label="Previous">
                            <i class="fa fa-arrow-left"></i>
                            <span class="d-none d-sm-inline">Prev</span>
                        </a>
                    </li>

                    <?php for($i = 1; $i <= $total_pages; $i++): ?>
                        <li>
                            <a class="<?= ($pagination == $i) ? 'active' : '' ?>" href="?children_page=<?= $i ?>#sponsorship-container"><?= $i ?></a>
                        </li>
                    <?php endfor; ?>

                    <li class="<?= ($pagination >= $total_pages) ? 'disabled' : '' ?>">
                        <a href="?children_page=<?= $pagination + 1 ?>#sponsorship-container" aria-label="Next page" class="<?= ($pagination >= $total_pages) ? 'disabled' : '' ?>">
                          <span class="d-none d-sm-inline">Next</span>
                          <i class="fa fa-arrow-right"></i>
                        </a>
                    </li>
                </ul>
            </nav>
          </div>

        </section>   
    </div>
    <?php include 'include/footer.php'; endwhile;?>   
</html>