

<?php $__env->startSection('content'); ?>

<!-- HERO -->
<section class="gallery-hero">
    <div class="container">
        <div class="row align-items-center min-vh-75">

            <div class="col-lg-6">
                <span class="text-uppercase tracking-wide text-gold">
                    Our Visual Story
                </span>

                <h1 class="display-5 fw-bold mt-2">
                    Moments of Luxury<br>
                    <span class="text-gold">Captured</span>
                </h1>

                <p class="mt-3 text-light opacity-75">
                    A curated glimpse into the elegance, comfort and
                    timeless hospitality that defines our hotel.
                </p>
            </div>

        </div>
    </div>
</section>


<!-- GALLERY SECTION -->
<section class="section">
    <div class="container">

        <!-- TITLE -->
        <div class="text-center mb-5">
            <h2 class="section-title">Our Moments</h2>
            <p class="section-sub">
                A glimpse of our rooms, interiors & world-class hospitality
            </p>
        </div>

        <!-- GALLERY GRID -->
        <div class="row g-4">

            <?php $__empty_1 = true; $__currentLoopData = $images; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $img): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
            <div class="col-lg-4 col-md-6">
                <div class="gallery-card">
                    <img
                        src="<?php echo e(asset('uploads/rooms/'.$img->image)); ?>"
                        onerror="this.src='<?php echo e(asset('images/default.jpg')); ?>'"
                        alt="Hotel Gallery">
                </div>
            </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
            <div class="col-12 text-center">
                <p class="text-muted">Gallery images will appear here.</p>
            </div>
            <?php endif; ?>

        </div>

    </div>
</section>

<!-- LIGHTBOX MODAL -->
<div class="modal fade" id="galleryModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content bg-transparent border-0">
            <img id="galleryModalImg" class="img-fluid rounded-4 shadow">
        </div>
    </div>
</div>


<style>
/* ===== GALLERY ===== */
.gallery-card {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(15,42,68,.15);
    cursor: pointer;
}

.gallery-card img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    transition: transform .6s ease;
}

.gallery-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        rgba(15,42,68,.0),
        rgba(15,42,68,.55)
    );
    opacity: 0;
    transition: .4s ease;
}

.gallery-card:hover img {
    transform: scale(1.08);
}

.gallery-card:hover::after {
    opacity: 1;
}
.gallery-hero {
    background:
        linear-gradient(120deg, rgba(9,28,47,.85), rgba(15,42,68,.6)),
        url('<?php echo e(asset("images/gallery-hero.jpg")); ?>') center / cover no-repeat;
    color: #fff;
}

.text-gold {
    color: #c6a87d;
}

.tracking-wide {
    letter-spacing: 2px;
}

</style>


<script>
document.querySelectorAll('.gallery-card img').forEach(img => {
    img.addEventListener('click', function () {
        document.getElementById('galleryModalImg').src = this.src;
        new bootstrap.Modal(document.getElementById('galleryModal')).show();
    });
});
</script>

<?php $__env->stopSection(); ?>

<?php echo $__env->make('frontend.layout', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home2/jitrealx/public_html/hotelbooking/resources/views/frontend/gallery.blade.php ENDPATH**/ ?>