<?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>Services</h1>
                    <ol class="breadcrumb">
                        <li><a href="index.php">Home</a></li>
                        <li class="active">Services</li>
                    </ol>
                </div>
            </div> <!-- end container -->
        </section>
       
<!-- start services -->
<section class="recent-news">
    <div class="container">
        <div class="row section-title-s3">
            <div class="col col-md-10 col-md-offset-1">
                <h2><span>Our</span> Services</h2>
            </div>
        </div> <!-- end section-title -->

        <?php
        // Fetch data from tour_packages
        $sql = "SELECT * FROM tour_packages";
        $result = mysqli_query($conn, $sql);
        ?>

        <div class="row blog-grid">
            <?php
            if (mysqli_num_rows($result) > 0) {
                $delay = 0;
                while ($row = mysqli_fetch_assoc($result)) {
                    $id = $row['id'];
                    $package_name = $row['package_name'];
                    $package_image = $row['package_image'];
                    $description = $row['description'];

                    // Optional: generate a delay for animation
                    $delayAttr = $delay > 0 ? ' data-wow-delay="' . $delay . 's"' : '';
                    $delay += 0.3;
                    ?>
                    <div style="margin-bottom:10px;" class="col col-sm-4 col-xs-6 wow fadeInLeftSlow" <?= $delayAttr ?>>
                        <div class="post">
                            <div class="entry-media entry-date">
                                <img style="height:250px;" src="admin/html/<?= htmlspecialchars($package_image) ?>" alt
                                    class="img img-responsive">

                            </div>
                            <div class="entry-body">
                                <div class="entry-title">
                                    <h3><a href="service-detail.php?id=<?php echo $id ?>"><?= htmlspecialchars($package_name) ?></a></h3>
                                </div>
                                <div class="entry-date-author">
                                    <ul>
                                        <?php
                                        $short_description = implode(' ', array_slice(explode(' ', $description), 0, 8));
                                        ?>
                                        <li><p class="black-color"><?= htmlspecialchars($short_description) ?>...</p></li>
                                    </ul>
                                </div>
                                <div>
                                    <a href="service-detail.php?id=<?php echo $id ?>" class="btn theme-btn service-btn">View
                                        More</a>

                                </div>
                            </div>
                        </div>
                    </div>
                    <?php
                }
            } else {
                echo "<p>No tour packages found.</p>";
            }
            ?>
        </div>

        <!-- end row -->
    </div> <!-- end container -->
</section>
<style>
    .service-btn:hover {
        color: white !important;
    }
</style>
<!-- end recent-news -->


<!-- start testimonials -->
<section class="testimonials section-padding">
    <div class="container">
        <div class="row section-title-single-heading">
            <div class="col col-md-8 col-md-offset-2">
                <h2><span> Client'</span> testimonials</h2>
            </div>
        </div> <!-- end section-title -->

        <?php
        $sql = "SELECT * FROM client_reviews ORDER BY created_at DESC";
        $result = mysqli_query($conn, $sql);
        ?>

        <div class="row">
            <div class="col col-md-10 col-md-offset-1">
                <div class="client-testimonials testimonials-slider">
                    <?php
                    if (mysqli_num_rows($result) > 0) {
                        $i = 1;
                        while ($row = mysqli_fetch_assoc($result)) {
                            $name = htmlspecialchars($row['client_name']);
                            $location = htmlspecialchars($row['client_location']);
                            $review = htmlspecialchars($row['client_review']);

                            // Rotate sample images (you can enhance this by using an `image` column if you have one)
                            ?>
                            <div class="box">
                                <div class="box-inner">
                                    <div class="img-holder">
                                        <img src="images/customer-rating.png" style="width:100px; " alt="<?= $name ?>" class="img img-circle">
                                    </div>
                                    <h3><?= $name ?></h3>
                                    <span><?= $location ?></span>
                                    <p><?= $review ?></p>
                                </div>
                            </div>
                            <?php
                            $i++;
                        }
                    } else {
                        echo "<p>No client reviews found.</p>";
                    }
                    ?>
                </div>
            </div>
        </div>

    </div> <!-- end container -->
</section>
<!-- end testimonials -->


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