<?php $__env->startSection('title', 'Gallery - Hotel Bardan Boutique'); ?>

<?php $__env->startSection('content'); ?>
<!-- Page Header -->
<section class="relative h-96 flex items-center justify-center overflow-hidden">
    <div class="absolute inset-0 z-0">
        <img src="https://images.unsplash.com/photo-1564501049412-61c2a3083791?w=1920&h=600&fit=crop&q=80" 
             alt="Hotel Gallery" 
             class="w-full h-full object-cover">
    </div>
    <div class="hero-overlay"></div>
    <div class="relative z-10 container-custom text-center text-white">
        <h1 class="text-5xl md:text-6xl font-display font-bold mb-4 text-shadow-lg" data-aos="fade-up">
            Picture Gallery
        </h1>
        <p class="text-xl text-shadow" data-aos="fade-up" data-aos-delay="100">
            Explore our beautiful hotel through images
        </p>
    </div>
</section>

<!-- Gallery Filters -->
<section class="py-12 bg-gray-50">
    <div class="container-custom">
        <div class="flex flex-wrap justify-center gap-4" data-aos="fade-up">
            <button class="filter-btn active px-6 py-3 rounded-full bg-primary-600 text-white font-medium hover:bg-primary-700 transition-colors" data-filter="all">
                All Images
            </button>
            <?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <button class="filter-btn px-6 py-3 rounded-full bg-white text-gray-700 font-medium hover:bg-primary-600 hover:text-white transition-colors shadow-md" data-filter="<?php echo e($category); ?>">
                <?php echo e(ucfirst($category)); ?>

            </button>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
    </div>
</section>

<!-- Gallery Grid -->
<section class="py-12" x-data="{ lightboxOpen: false, lightboxImage: '', lightboxTitle: '' }">
    <div class="container-custom">
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
            <?php $__currentLoopData = $images; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $image): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <div class="gallery-item group relative overflow-hidden rounded-lg shadow-lg cursor-pointer h-64" 
                 data-category="<?php echo e($image->category); ?>"
                 data-aos="fade-up" 
                 data-aos-delay="<?php echo e(($index % 8) * 50); ?>"
                 @click="lightboxOpen = true; lightboxImage = '<?php echo e($image->image); ?>'; lightboxTitle = '<?php echo e(addslashes($image->title)); ?>'">
                <img src="<?php echo e($image->image); ?>" 
                     alt="<?php echo e($image->title); ?>" 
                     class="w-full h-full object-cover transform transition-transform duration-500 group-hover:scale-110">
                <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                    <div class="absolute bottom-0 left-0 right-0 p-4 text-white">
                        <h3 class="font-bold text-lg mb-1"><?php echo e($image->title); ?></h3>
                        <p class="text-sm"><?php echo e(ucfirst($image->category)); ?></p>
                    </div>
                    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                        <svg class="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"/>
                        </svg>
                    </div>
                </div>
            </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
        
        <!-- Pagination -->
        <?php if($images->hasPages()): ?>
        <div class="mt-12 flex justify-center">
            <?php echo e($images->links()); ?>

        </div>
        <?php endif; ?>
        
        <!-- Lightbox Modal -->
        <div x-show="lightboxOpen" 
             style="display: none; z-index: 100;"
             class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-90 p-4"
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
             x-transition:leave="transition ease-in duration-300"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"
             @keydown.escape.window="lightboxOpen = false">
             
             <!-- Image Container -->
             <div class="relative flex flex-col items-center justify-center w-full" style="max-height: 90vh;" @click.away="lightboxOpen = false">
                 <div class="relative inline-block">
                     <img :src="lightboxImage" :alt="lightboxTitle" class="max-w-full object-contain rounded-lg shadow-2xl" style="max-height: 85vh;">
                     
                     <!-- Close Button (Top Right of Image) -->
                     <button @click="lightboxOpen = false" class="absolute -top-4 -right-4 bg-primary-600 text-white rounded-full p-2 shadow-xl hover:bg-primary-700 transition-colors" style="z-index: 110;">
                         <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                         </svg>
                     </button>
                 </div>
                 <div class="mt-4 text-center text-white text-xl font-medium tracking-wide" x-text="lightboxTitle"></div>
             </div>
        </div>
    </div>
</section>

<!-- Call to Action -->
<section class="py-20 bg-gradient-to-r from-primary-600 to-accent-600">
    <div class="container-custom text-center text-white" data-aos="fade-up">
        <h2 class="text-4xl font-display font-bold mb-4">Like What You See?</h2>
        <p class="text-xl mb-8 max-w-2xl mx-auto">
            Experience it in person. Book your stay at Hotel Bardan Boutique today
        </p>
        <a href="<?php echo e(route('rooms.index')); ?>" class="btn bg-white text-primary-600 hover:bg-gray-100 text-lg px-8 py-4">
            View Rooms & Book
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
            </svg>
        </a>
    </div>
</section>

<?php $__env->startPush('scripts'); ?>
<script>
    // Gallery filter functionality
    document.querySelectorAll('.filter-btn').forEach(button => {
        button.addEventListener('click', function() {
            // Update active state
            document.querySelectorAll('.filter-btn').forEach(btn => {
                btn.classList.remove('active', 'bg-primary-600', 'text-white');
                btn.classList.add('bg-white', 'text-gray-700');
            });
            this.classList.add('active', 'bg-primary-600', 'text-white');
            this.classList.remove('bg-white', 'text-gray-700');
            
            const filter = this.dataset.filter;
            
            // Filter items
            document.querySelectorAll('.gallery-item').forEach(item => {
                if (filter === 'all' || item.dataset.category === filter) {
                    item.style.display = 'block';
                    item.classList.add('animate-fade-in');
                } else {
                    item.style.display = 'none';
                }
            });
        });
    });
</script>
<?php $__env->stopPush(); ?>
<?php $__env->stopSection(); ?>


<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /Users/sumankc/Desktop/ Websites/Hotel Bardan Boutique/resources/views/gallery.blade.php ENDPATH**/ ?>