<?php 
require('header.php');
?>

        <!-- start page-title -->    
        <section class="page-title">
            <div class="page-title-bg"></div>
            <div class="container">
                <div class="title-box">
                    <h1>Gallery</h1>
                    <ol class="breadcrumb">
                        <li><a href="index.php">Home</a></li>
                        <li class="active">Gallery</li>
                    </ol>
                </div>
            </div> <!-- end container -->
        </section>
       

<!-- start gallery-st2 -->
<section class="gallery-st2 sortable-gallery gallery section-padding">
    <h2 class="hidden">Gallery</h2>
    <div class="container-fluid">
        <div class="row section-title-s3">
            <div class="col col-md-8 col-md-offset-2">
                <h2><span>Our</span> Gallery</h2>
                <p class="black-color">Explore moments captured from our events, training sessions, and community programs that reflect our
                    mission, creativity, and commitment to empowering lives.</p>

            </div>
        </div> <!-- end section-title -->

        <?php
        $sql = "SELECT * FROM gallery";
        $result = mysqli_query($conn, $sql);
        ?>

        <div class="row">
            <div class="col col-lg-12">
                <div class="gallery-filters">
                    <ul>
                        <li><a data-filter="*" href="#" class="current">All Images</a></li>
                    </ul>
                </div>

                <div class="gallery-container popup-gallery">
                    <?php
                    if (mysqli_num_rows($result) > 0) {
                        while ($row = mysqli_fetch_assoc($result)) {
                            $image = htmlspecialchars($row['image_url']);  // image filename or path
                            ?>
                            <div class="box">
                                <a href="admin/html/<?= $image ?>">
                                    <div class="img-holder">
                                        <img style="height:250px; width:100%; background-color:lightgrey; object-fit:cover;" src="admin/html/<?= $image ?>"
                                            alt="Gallery Image" class="img img-responsive">
                                    </div>
                                    <div class="hover-text">
                                        <!-- You can add title or description here if you have those columns -->
                                    </div>
                                </a>
                            </div>
                            <?php
                        }
                    } else {
                        echo "<p>No gallery images found.</p>";
                    }
                    ?>
                  <div class="box">
                                <a href="#">
                                  <video controls muted style="height:250px; width:100%; background-color:lightgrey; object-fit:cover;" src="images/videos/8.mp4"
                                            alt="Gallery Image"  >
                                    <!--<div class="img-holder">
                                        
                                    </div> -->
                                    <div class="hover-text">
                                        <!-- You can add title or description here if you have those columns -->
                                    </div>
                                </a>
                            </div>
                </div>
            </div>
        </div>

        <!-- end row -->
    </div> <!-- end container -->
</section>
<!-- end gallery-st2 -->

<?php 
require('footer.php');
?>