4WDCSA.co.za/events.php

<?php
$headerStyle = 'light';
include_once('header.php') ?>

<style>
    .image {
        width: 400px;
        /* Set your desired width */
        height: 320px;
        /* Set your desired height */
        overflow: hidden;
        /* Hide any overflow */
        display: block;
        /* Ensure proper block behavior */
    }

    .image img {
        width: 100%;
        /* Image scales to fill the container */
        height: 100%;
        /* Image scales to fill the container */
        object-fit: cover;
        /* Fills the container while maintaining aspect ratio */
        object-position: top;
        /* Aligns the top of the image with the top of the container */
        display: block;
        /* Prevents inline whitespace issues */
    }

    .custom-modal {
        display: none;
        position: fixed;
        z-index: 9999;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.9);
    }

    .custom-modal-content {
        margin: 5% auto;
        padding: 20px;
        max-width: 800px;
        text-align: center;
        background: #fff;
        border-radius: 10px;
        position: relative;
    }

    .custom-modal-content img {
        max-width: 100%;
        height: auto;
        border-radius: 5px;
    }

    .custom-modal-close {
        position: absolute;
        top: 10px;
        right: 20px;
        font-size: 30px;
        font-weight: bold;
        color: #333;
        cursor: pointer;
    }
</style>

<?php
$bannerFolder = 'assets/images/banners/';
$bannerImages = glob($bannerFolder . '*.{jpg,jpeg,png,webp}', GLOB_BRACE);

$randomBanner = 'assets/images/base4/camping.jpg'; // default fallback
if (!empty($bannerImages)) {
    $randomBanner = $bannerImages[array_rand($bannerImages)];
}
?>
<section class="page-banner-area pt-50 pb-35 rel z-1 bgs-cover" style="background-image: url('<?php echo $randomBanner; ?>');">
    <div class="banner-overlay"></div>
    <div class="container">
        <div class="banner-inner text-white mb-50">
            <h2 class="page-title mb-10" data-aos="fade-left" data-aos-duration="1500" data-aos-offset="50">4WDCSA events</h2>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb justify-content-center mb-20" data-aos="fade-right" data-aos-delay="200" data-aos-duration="1500" data-aos-offset="50">
                    <li class="breadcrumb-item"><a href="index.php">Home</a></li>
                    <li class="breadcrumb-item active">4WDCSA Events</li>
                </ol>
            </nav>
        </div>
    </div>
</section>

<!-- Tour List Area start -->
<section class="tour-list-page py-100 rel z-1">
    <div class="container">
        <div class="row">

            <div class="col-lg-12">
                <div class="shop-shorter rel z-3 mb-20">
                    <!-- <ul class="grid-list mb-15 me-2">
                        <li><a href="#"><i class="fal fa-border-all"></i></a></li>
                        <li><a href="#"><i class="far fa-list"></i></a></li>
                    </ul>
                    <div class="sort-text mb-15 me-4 me-xl-auto">
                    </div> -->
                    <div class="sort-text mb-15 me-4">
                        Sort By
                    </div>
                    <select>
                        <option value="default" selected="">Sort By</option>
                        <option value="new">Newness</option>
                        <option value="old">Oldest</option>
                        <option value="hight-to-low">High To Low</option>
                        <option value="low-to-high">Low To High</option>
                    </select>
                </div>

                <?php
                // Query to retrieve data from the trips table
                $sql = "SELECT event_id, date, time, name, image, description, feature, location, type, promo FROM events WHERE date > CURDATE() ORDER BY date ASC";

                $result = $conn->query($sql);

                if ($result->num_rows > 0) {
                    // Loop through each row
                    while ($row = $result->fetch_assoc()) {
                        $event_id = $row['event_id'];
                        $date = $row['date'];
                        $time = $row['time'];
                        $name = $row['name'];
                        $image = $row['image'];
                        $description = $row['description'];
                        $feature = $row['feature'];
                        $location = $row['location'];
                        $type = $row['type'];
                        $promo = $row['promo'];

                        // Determine the badge text based on the status
                        $badge_text = 'OPEN DAY';

                        // Output the HTML structure with dynamic data
                        echo '
        <div class="destination-item style-three bgc-lighter" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
            <div class="image">
                <img src="' . $image . '" alt="' . $name . '">
            </div>
            <div class="content">
                <div class="destination-header">
                    <span class="location"><i class="fal fa-map-marker-alt"></i> ' . $location . '</span>
                </div>
                <h5>' . $name . '</a></h5>
                <p>' . $feature . '</p>
                <p>' . $description . '</p>
                <ul class="blog-meta">
                    <li><i class="far fa-calendar"></i> ' . convertDate($date) . '</li>
                    <li><i class="far fa-clock"></i> ' . $time . '</li>
                </ul>
                  <button type="button" class="theme-btn style-three view-image-btn" style="padding: 2px 20px"
                    data-image-src="' . $promo . '"
                    data-image-title="' . htmlspecialchars($name, ENT_QUOTES) . '">
                    View Promo
                </button>
              
            </div>
        </div>';
                    }
                } else {
                    echo "No events available.";
                }

                // Close connection
                $conn->close();
                ?>


            </div>
        </div>
    </div>
</section>
<!-- Tour List Area end -->
<!-- Custom Image Modal -->
<div id="customImageModal" class="custom-modal">
    <div class="custom-modal-content">
        <span class="custom-modal-close">&times;</span>
        <h5 id="modalImageTitle"></h5>
        <img id="modalImageElement" src="" alt="" class="img-fluid">
    </div>
</div>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const modal = document.getElementById("customImageModal");
        const modalImg = document.getElementById("modalImageElement");
        const modalTitle = document.getElementById("modalImageTitle");
        const closeBtn = document.querySelector(".custom-modal-close");

        document.querySelectorAll(".view-image-btn").forEach(button => {
            button.addEventListener("click", () => {
                const src = button.getAttribute("data-image-src");
                const title = button.getAttribute("data-image-title");
                modalImg.src = src;
                modalTitle.textContent = title;
                modal.style.display = "block";
            });
        });

        closeBtn.addEventListener("click", () => {
            modal.style.display = "none";
            modalImg.src = "";
        });

        // Optional: click outside modal to close
        window.addEventListener("click", (e) => {
            if (e.target === modal) {
                modal.style.display = "none";
                modalImg.src = "";
            }
        });
    });
</script>


<?php include_once("insta_footer.php"); ?>