<?php
require_once __DIR__ . '/config/database.php';

$galleryItems = [];

$sql = "SELECT id, title, description, image_url FROM gallery ORDER BY is_featured DESC, sort_order ASC, created_at DESC";
$result = $conn->query($sql);
if ($result instanceof mysqli_result) {
    while ($row = $result->fetch_assoc()) {
        $imageUrl = trim((string)($row['image_url'] ?? ''));
        if ($imageUrl === '') {
            continue;
        }

        $galleryItems[] = [
            'title' => trim((string)($row['title'] ?? 'Gallery Image')),
            'image_url' => str_replace('\\', '/', $imageUrl),
        ];
    }
    $result->free();
}

if (empty($galleryItems)) {
    $galleryItems = [
        ['title' => 'Gallery 1', 'image_url' => 'images/gallery/1.webp'],
        ['title' => 'Gallery 2', 'image_url' => 'images/gallery/2.webp'],
        ['title' => 'Gallery 3', 'image_url' => 'images/gallery/3.webp'],
        ['title' => 'Gallery 4', 'image_url' => 'images/gallery/4.webp'],
        ['title' => 'Gallery 5', 'image_url' => 'images/gallery/5.webp'],
        ['title' => 'Gallery 6', 'image_url' => 'images/gallery/6.webp'],
        ['title' => 'Gallery 7', 'image_url' => 'images-lake-view-hotel/gallery/4.webp'],
        ['title' => 'Gallery 8', 'image_url' => 'images-city-apartment/room/3.webp'],
        ['title' => 'Gallery 9', 'image_url' => 'images/room/4.webp'],
    ];
}
?>
<!DOCTYPE html>
<html lang="zxx">

<head>
    <title>zemaraim — Hotel Website Template</title>
    <link rel="icon" href="images/icon.webp" type="image/gif" sizes="16x16">
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="width=device-width, initial-scale=1.0" name="viewport" >
    <meta content="zemaraim — Hotel Website Template" name="description" >
    <meta content="" name="keywords" >
    <meta content="" name="author" >
    <!-- CSS Files
    ================================================== -->
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" id="bootstrap">
    <link href="css/plugins.css" rel="stylesheet" type="text/css" >
    <link href="css/swiper.css" rel="stylesheet" type="text/css" >
    <link href="css/style.css" rel="stylesheet" type="text/css" >
    <link href="css/coloring.css" rel="stylesheet" type="text/css" >
    <!-- color scheme -->
    <link id="colors" href="css/colors/scheme-01.css" rel="stylesheet" type="text/css" >

</head>

<body>
    <div id="wrapper">
        <a href="#" id="back-to-top"></a>
        
        <!-- page preloader begin -->
        <div id="de-loader"></div>
        <!-- page preloader close -->

        <!-- header begin -->
        <?php include 'header.php'; ?>
        <!-- header close -->
        <!-- content begin -->
        <div class="no-bottom no-top" id="content">

            <div id="top"></div>

            <section class="page-breadcrumb-hero" style="--page-hero-bg: url('images/background/3.webp');">
                <div class="container">
                    <div class="page-breadcrumb-content text-center">
                        <span class="page-breadcrumb-kicker">Hotel Gallery</span>
                        <h1>Gallery</h1>
                        <p>Preview our rooms, guest spaces, and facilities before you make your reservation.</p>
                        <ul class="page-breadcrumb-list">
                            <li><a href="index.php">Home</a></li>
                            <li class="active">Gallery</li>
                        </ul>
                    </div>
                </div>
            </section>

            <!--gallery section-->
            <section class="gallery-modern-section">
                <div class="container">
                    <div class="gallery-modern-head text-center wow fadeInUp">
                        <span class="gallery-kicker">Visual Experience</span>
                        <h2 class="gallery-title">See the spaces before you book your stay.</h2>
                        <p class="gallery-subtitle">Explore our hotel atmosphere, premium rooms, dining areas, and guest amenities through curated photos.</p>
                    </div>

                    <div class="gallery-modern-grid">
                        <?php foreach ($galleryItems as $index => $item): ?>
                            <?php $delay = number_format(($index % 10) * 0.1, 1); ?>
                            <a href="<?php echo htmlspecialchars($item['image_url'], ENT_QUOTES, 'UTF-8'); ?>" class="gallery-modern-item gallery-lightbox-trigger wow fadeInUp" data-wow-delay="<?php echo $delay; ?>s">
                                <img src="<?php echo htmlspecialchars($item['image_url'], ENT_QUOTES, 'UTF-8'); ?>" alt="<?php echo htmlspecialchars($item['title'], ENT_QUOTES, 'UTF-8'); ?>">
                                <span>View</span>
                            </a>
                        <?php endforeach; ?>
                    </div>
                    <div id="gallery-lightbox" class="gallery-lightbox" aria-hidden="true">
                        <button type="button" class="gallery-lightbox-close" aria-label="Close image">&times;</button>
                        <img id="gallery-lightbox-image" src="" alt="Gallery preview">
                    </div>

                    <div class="gallery-modern-cta wow fadeInUp" data-wow-delay="0.9s">
                        <div class="gallery-cta-copy">
                            <h3>Ready to experience zemaraim in person?</h3>
                            <p>Reserve now and secure the best available rate with instant confirmation.</p>
                        </div>
                        <div class="gallery-cta-actions">
                            <a href="reservation.php" class="btn-main">Book Your Stay</a>
                            <a href="rooms.php" class="btn-main btn-line">Browse Rooms</a>
                        </div>
                    </div>
                </div>
            </section>
        </div>
        <!-- content close -->
        
        <!-- footer begin -->
        <?php include 'footer.php'; ?>
        <!-- footer close -->
    </div>

    <!-- Javascript Files
    ================================================== -->
    <script src="js/plugins.js"></script>
    <script src="js/designesia.js"></script>
    <script src="js/swiper.js"></script>
    <script src="js/custom-marquee.js"></script>
    <script src="js/custom-swiper-1.js"></script>
    <style>
        .gallery-lightbox {
            position: fixed;
            inset: 0;
            z-index: 10050;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
            background: rgba(0, 0, 0, 0.82);
        }

        .gallery-lightbox.is-open {
            display: flex;
        }

        .gallery-lightbox img {
            max-width: min(1200px, 92vw);
            max-height: 86vh;
            border-radius: 10px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
            object-fit: contain;
            background: #111;
        }

        .gallery-lightbox-close {
            position: absolute;
            top: 16px;
            right: 20px;
            width: 44px;
            height: 44px;
            border: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            color: #fff;
            font-size: 28px;
            line-height: 1;
            cursor: pointer;
        }

        @media (max-width: 575px) {
            .gallery-lightbox {
                padding: 12px;
            }

            .gallery-lightbox img {
                max-width: 96vw;
                max-height: 82vh;
            }
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const triggers = document.querySelectorAll(".gallery-lightbox-trigger");
            const lightbox = document.getElementById("gallery-lightbox");
            const lightboxImg = document.getElementById("gallery-lightbox-image");
            const closeBtn = document.querySelector(".gallery-lightbox-close");

            if (!lightbox || !lightboxImg || !closeBtn || !triggers.length) return;

            const closeLightbox = () => {
                lightbox.classList.remove("is-open");
                lightbox.setAttribute("aria-hidden", "true");
                lightboxImg.src = "";
                document.body.classList.remove("about-lightbox-open");
            };

            triggers.forEach((link) => {
                link.addEventListener("click", function (e) {
                    e.preventDefault();
                    e.stopImmediatePropagation();
                    const href = this.getAttribute("href");
                    if (!href) return;
                    lightboxImg.src = href;
                    lightboxImg.alt = this.querySelector("img")?.alt || "Gallery preview";
                    lightbox.classList.add("is-open");
                    lightbox.setAttribute("aria-hidden", "false");
                    document.body.classList.add("about-lightbox-open");
                }, true);
            });

            closeBtn.addEventListener("click", closeLightbox);

            lightbox.addEventListener("click", function (e) {
                if (e.target === lightbox) {
                    closeLightbox();
                }
            });

            document.addEventListener("keydown", function (e) {
                if (e.key === "Escape" && lightbox.classList.contains("is-open")) {
                    closeLightbox();
                }
            });
        });
    </script>

</body>

</html>
