@extends('layouts.web')

@section('content')

<!-- Modern Mosaic Gallery Section Start -->
<section class="modern-gallery-section ptb-100">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center mb-5">
                <h2 class="section-title">Our Gallery</h2>
                <p class="section-subtitle">Explore our beautiful collection</p>
                <div class="title-divider"></div>
            </div>
        </div>
        
        @if(count($galleries) > 0)
            @php
                // Shuffle the galleries array for random order
                $randomizedGalleries = $galleries->shuffle();
                
                // Define mosaic patterns (different size combinations)
                $mosaicPatterns = [
                    [1, 2, 1, 2, 3, 1],  // Pattern 1
                    [2, 1, 3, 1, 2, 1],  // Pattern 2
                    [3, 1, 1, 2, 1, 2],  // Pattern 3
                    [1, 3, 2, 1, 1, 2],  // Pattern 4
                    [2, 2, 1, 3, 1, 1],  // Pattern 5
                    [1, 1, 2, 1, 3, 2],  // Pattern 6
                    [4, 1, 2, 1, 1, 1],  // Pattern 7 (includes extra large)
                    [1, 2, 2, 3, 1, 1],  // Pattern 8
                ];
                
                // Select random pattern for this visit
                $selectedPattern = $mosaicPatterns[array_rand($mosaicPatterns)];
                
                // Add random size classes to each gallery item
                $sizeClasses = ['gallery-size-small', 'gallery-size-medium', 'gallery-size-large', 'gallery-size-extra'];
            @endphp
            
            <div class="modern-mosaic-gallery">
                <div class="gallery-grid" id="random-gallery">
                    @foreach($randomizedGalleries as $index => $gallery)
                        @php
                            // Get random size class based on pattern or random if pattern exhausted
                            $patternIndex = $index % count($selectedPattern);
                            $sizeType = $selectedPattern[$patternIndex] ?? rand(1, 4);
                            
                            // Map size type to CSS classes
                            switch($sizeType) {
                                case 1:
                                    $sizeClass = 'gallery-size-small';
                                    break;
                                case 2:
                                    $sizeClass = 'gallery-size-medium';
                                    break;
                                case 3:
                                    $sizeClass = 'gallery-size-large';
                                    break;
                                case 4:
                                    $sizeClass = 'gallery-size-extra';
                                    break;
                                default:
                                    $sizeClass = 'gallery-size-medium';
                            }
                            
                            // Add random animation delay
                            $delay = rand(0, 300);
                        @endphp
                        <div class="gallery-item {{ $sizeClass }}" 
                             data-aos="fade-up" 
                             data-aos-delay="{{ $delay }}"
                             data-gallery-id="{{ $gallery->id }}">
                            <div class="gallery-card">
                                <div class="gallery-image-wrapper">
                                    <img alt="{{ $gallery->title }}" 
                                         src="{{ asset('storage/app/public/gallery/'.$gallery->logoname) }}"
                                         loading="lazy">
                                    <div class="gallery-overlay">
                                        <div class="overlay-content">
                                            <h3 class="gallery-title">{{ $gallery->title }}</h3>
                                            <div class="gallery-actions">
                                                <button class="view-btn" onclick="openLightbox('{{ asset('storage/app/public/gallery/'.$gallery->logoname) }}', '{{ $gallery->title }}')">
                                                    <i class="fas fa-search-plus"></i> View
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
            
            <!-- Randomize Button -->
            <div class="row mt-5">
                <div class="col-12 text-center">
                    <button class="randomize-btn" onclick="window.location.reload();">
                        <i class="fas fa-random"></i> Shuffle Gallery
                    </button>
                    <p class="random-hint mt-2">
                        <small><i class="fas fa-sync-alt"></i> Refresh page for a new arrangement!</small>
                    </p>
                </div>
            </div>
        @else
            <div class="col-12">
                <div class="empty-gallery text-center">
                    <i class="fas fa-images fa-3x mb-3"></i>
                    <p>No gallery items found.</p>
                </div>
            </div>
        @endif
    </div>
</section>

<!-- Lightbox Modal -->
<div id="lightbox-modal" class="lightbox-modal">
    <span class="close-lightbox" onclick="closeLightbox()">&times;</span>
    <div class="lightbox-content">
        <img id="lightbox-img" src="">
        <div id="lightbox-caption" class="lightbox-caption"></div>
    </div>
</div>

<style>
/* Modern Gallery Styles */
.modern-gallery-section {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 1rem;
    position: relative;
    display: inline-block;
}

.section-subtitle {
    color: #7f8c8d;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.title-divider {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #3498db, #e74c3c);
    margin: 0 auto;
    border-radius: 2px;
}

/* Mosaic Grid Layout */
.modern-mosaic-gallery {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    grid-auto-flow: dense;
}

/* Dynamic size classes for random mosaic effect */
.gallery-size-small {
    grid-column: span 1;
    grid-row: span 1;
}

.gallery-size-medium {
    grid-column: span 2;
    grid-row: span 1;
}

.gallery-size-large {
    grid-column: span 2;
    grid-row: span 2;
}

.gallery-size-extra {
    grid-column: span 3;
    grid-row: span 2;
}

/* Gallery Card Styles */
.gallery-card {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
    background: #fff;
}

.gallery-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.gallery-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding-bottom: 75%; /* 4:3 Aspect Ratio */
}

.gallery-size-extra .gallery-image-wrapper {
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio for extra large */
}

.gallery-size-large .gallery-image-wrapper {
    padding-bottom: 66.66%; /* 3:2 Aspect Ratio */
}

.gallery-image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-card:hover .gallery-image-wrapper img {
    transform: scale(1.1);
}

/* Overlay Styles */
.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.95), rgba(231, 76, 60, 0.95));
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
}

.gallery-card:hover .gallery-overlay {
    opacity: 1;
}

.overlay-content {
    text-align: center;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.gallery-card:hover .overlay-content {
    transform: translateY(0);
}

.gallery-title {
    color: white;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 15px;
    padding: 0 15px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.gallery-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.view-btn {
    background: white;
    color: #3498db;
    border: none;
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.view-btn:hover {
    background: #3498db;
    color: white;
    transform: scale(1.05);
}

/* Randomize Button Styles */
.randomize-btn {
    background: linear-gradient(135deg, #3498db, #e74c3c);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.randomize-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

.randomize-btn i {
    margin-right: 8px;
}

.random-hint {
    color: #7f8c8d;
    font-size: 0.9rem;
}

.random-hint i {
    margin-right: 5px;
}

/* Lightbox Modal */
.lightbox-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    animation: fadeIn 0.3s ease;
}

.lightbox-content {
    position: relative;
    margin: auto;
    padding: 20px;
    width: 90%;
    max-width: 1200px;
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#lightbox-img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
}

.lightbox-caption {
    color: white;
    text-align: center;
    padding: 15px;
    font-size: 1.2rem;
    margin-top: 15px;
}

.close-lightbox {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.close-lightbox:hover {
    color: #bbb;
}

/* Empty State */
.empty-gallery {
    padding: 60px 20px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.empty-gallery i {
    color: #bdc3c7;
}

.empty-gallery p {
    color: #7f8c8d;
    font-size: 1.1rem;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInImage {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Responsive Design */
@media (max-width: 1200px) {
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .gallery-size-small,
    .gallery-size-medium,
    .gallery-size-large,
    .gallery-size-extra {
        grid-column: span 1;
        grid-row: span 1;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .gallery-title {
        font-size: 1.2rem;
    }
    
    .view-btn {
        padding: 6px 15px;
        font-size: 0.8rem;
    }
    
    .randomize-btn {
        padding: 10px 25px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .gallery-grid {
        grid-template-columns: 1fr;
    }
}

/* Loading animation for images */
.gallery-image-wrapper img {
    opacity: 0;
    animation: fadeInImage 0.5s ease forwards;
}

/* Hover effect enhancements */
.gallery-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
    z-index: 1;
    pointer-events: none;
}

.gallery-card:hover::before {
    left: 100%;
}

/* Optional: Add a subtle border radius variation */
.gallery-card {
    border-radius: 15px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
</style>

<script>
// Lightbox functionality
function openLightbox(imageUrl, title) {
    const modal = document.getElementById('lightbox-modal');
    const lightboxImg = document.getElementById('lightbox-img');
    const caption = document.getElementById('lightbox-caption');
    
    lightboxImg.src = imageUrl;
    caption.textContent = title;
    modal.style.display = 'block';
    
    // Prevent body scrolling when modal is open
    document.body.style.overflow = 'hidden';
}

function closeLightbox() {
    const modal = document.getElementById('lightbox-modal');
    modal.style.display = 'none';
    document.body.style.overflow = 'auto';
}

// Close lightbox with ESC key
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closeLightbox();
    }
});

// Close lightbox when clicking outside the image
document.getElementById('lightbox-modal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeLightbox();
    }
});

// Add animation on page load with random delays
document.addEventListener('DOMContentLoaded', function() {
    const galleryItems = document.querySelectorAll('.gallery-item');
    galleryItems.forEach((item, index) => {
        // Random initial state
        item.style.opacity = '0';
        item.style.transform = 'translateY(30px)';
        
        // Random delay for each item
        const randomDelay = Math.random() * 500;
        
        setTimeout(() => {
            item.style.transition = 'all 0.6s cubic-bezier(0.4, 0, 0.2, 1)';
            item.style.opacity = '1';
            item.style.transform = 'translateY(0)';
        }, randomDelay);
    });
    
    // Optional: Log the random arrangement
    console.log('Gallery arranged with random mosaic pattern!');
});

// Optional: Add a subtle parallax effect on scroll
window.addEventListener('scroll', function() {
    const scrolled = window.pageYOffset;
    const gallery = document.querySelector('.modern-mosaic-gallery');
    if (gallery) {
        gallery.style.transform = `translateY(${scrolled * 0.1}px)`;
    }
});
</script>

<!-- Add Font Awesome for icons (if not already included) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<!-- Gallery Section End -->
@endsection