<?php
require_once "common/front_header.php";
?>

    <style>
        @media (min-width: 1200px) {
            .slider_image {
                    height: 486px !important;
                    object-fit: contain;
            }
        }
    </style>
    <div class="container">
        <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">

                <?php
                $query = "SELECT * FROM tbl_images ORDER BY dateCreated DESC LIMIT 1";
                $response = $db->getAllGalleries($query);
                ?>
                <div class="carousel-item active">
                    <img class="d-block w-100 slider_image"
                         src="front_assets/img/gallery/<?php echo $response[0]['image1']; ?>"
                         alt="">

                    <div class="carousel-caption " style="background:rgba(0,0,0,0.3) !important;">
                        
                        <h4>
                            <a href="article.php"
                               style="color:white !important; font-size: 16px; text-decoration: none">
                                <?php echo $response[0]['title']; ?>
                            </a>
                        </h4>
                    </div>

                </div> 
                 
                <div class="carousel-item">
                    <img class="d-block w-100 slider_image"
                         src="front_assets/img/gallery/<?php echo $response[0]['image2']; ?>"
                         alt="First slide">

                    <div class="carousel-caption " style="background:rgba(0,0,0,0.3) !important;">
                        <h4>
                            <a href="article.php"
                               style="color:white !important; font-size: 16px; text-decoration: none">
                                <?php echo $response[0]['title']; ?>
                            </a>
                        </h4>
                    </div>
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100 slider_image"
                         src="front_assets/img/gallery/<?php echo $response[0]['image3']; ?>"
                         alt="First slide">

                    <div class="carousel-caption " style="background:rgba(0,0,0,0.3) !important;">
                        <h4>
                            <a href="article.php"
                               style="color:white !important; font-size: 16px; text-decoration: none">
                                <?php echo $response[0]['title']; ?>
                            </a>
                        </h4>
                    </div>
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100 slider_image"
                         src="front_assets/img/gallery/<?php echo $response[0]['image4']; ?>"
                         alt="First slide">

                    <div class="carousel-caption " style="background:rgba(0,0,0,0.3) !important;">
                        <h4>
                            <a href="article.php"
                               style="color:white !important; font-size: 16px; text-decoration: none">
                                <?php echo $response[0]['title']; ?>
                            </a>
                        </h4>
                    </div>
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100 slider_image"
                         src="front_assets/img/gallery/<?php echo $response[0]['image5']; ?>"
                         alt="First slide">

                    <div class="carousel-caption " style="background:rgba(0,0,0,0.3) !important;">
                        <h4>
                            <a href="article.php"
                               style="color:white !important; font-size: 16px; text-decoration: none">
                                <?php echo $response[0]['title']; ?>
                            </a>
                        </h4>
                    </div>
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100 slider_image"
                         src="front_assets/img/gallery/<?php echo $response[0]['image6']; ?>"
                         alt="First slide">

                    <div class="carousel-caption " style="background:rgba(0,0,0,0.3) !important;">
                        <h4>
                            <a href="article.php"
                               style="color:white !important; font-size: 16px; text-decoration: none">
                                <?php echo $response[0]['title']; ?>
                            </a>
                        </h4>
                    </div>
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>

    <div class="container">

        <?php
        $query = "SELECT * FROM tbl_images ORDER BY dateCreated DESC LIMIT 18 OFFSET 1";
        $response = $db->getAllGalleries($query);
        ?>

        <div class="row mt-3 mb-3">

            <?php foreach ($response as $event) : ?>
                <div class="col-md-4 col-12 mt-3">
                    <img class="img-fluid" src="front_assets/img/gallery/<?php echo $event['image1']; ?>"
                         alt="Card image cap">
                    <div class="carousel-caption " style="background:rgba(0,0,0,0.3) !important;">
                        <h4>
                            <a href="article.php"
                               style="color:white !important; font-size: 16px; text-decoration: none">
                                <?php echo $event['title']; ?>
                            </a>
                        </h4>
                    </div>
                </div>
                
                 <div class="col-md-4 col-12 mt-3">
                    <img class="img-fluid" src="front_assets/img/gallery/<?php echo $event['image2']; ?>"
                         alt="Card image cap">
                    <div class="carousel-caption " style="background:rgba(0,0,0,0.3) !important;">
                        <h4>
                            <a href="article.php"
                               style="color:white !important; font-size: 16px; text-decoration: none">
                                <?php echo $event['title']; ?>
                            </a>
                        </h4>
                    </div>
                    
    
                </div>
                
                <div class="col-md-4 col-12 mt-3">
                    <img class="img-fluid" src="front_assets/img/gallery/<?php echo $event['image3']; ?>"
                         alt="Card image cap">
                    <div class="carousel-caption " style="background:rgba(0,0,0,0.3) !important;">
                        <h4>
                            <a href="article.php"
                               style="color:white !important; font-size: 16px; text-decoration: none">
                                <?php echo $event['title']; ?>
                            </a>
                        </h4>
                    </div>
                </div>
                
                <div class="col-md-4 col-12 mt-3">
                    <img class="img-fluid" src="front_assets/img/gallery/<?php echo $event['image4']; ?>"
                         alt="Card image cap">
                    <div class="carousel-caption " style="background:rgba(0,0,0,0.3) !important;">
                        <h4>
                            <a href="article.php"
                               style="color:white !important; font-size: 16px; text-decoration: none">
                                <?php echo $event['title']; ?>
                            </a>
                        </h4>
                    </div>
                </div>
                
                
                
                <div class="col-md-4 col-12 mt-3">
                    <img class="img-fluid" src="front_assets/img/gallery/<?php echo $event['image5']; ?>"
                         alt="Card image cap">
                    <div class="carousel-caption " style="background:rgba(0,0,0,0.3) !important;">
                        <h4>
                            <a href="article.php"
                               style="color:white !important; font-size: 16px; text-decoration: none">
                                <?php echo $event['title']; ?>
                            </a>
                        </h4>
                    </div>
                </div>
                
                
                <div class="col-md-4 col-12 mt-3">
                    <img class="img-fluid" src="front_assets/img/gallery/<?php echo $event['image6']; ?>"
                         alt="Card image cap">
                    <div class="carousel-caption " style="background:rgba(0,0,0,0.3) !important;">
                        <h4>
                            <a href="article.php"
                               style="color:white !important; font-size: 16px; text-decoration: none">
                                <?php echo $event['title']; ?>
                            </a>
                        </h4>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>

    </div>


<?php
require_once "common/front_footer.php";
?>