@extends('landing.template.layout')
@section('content')

<div class="content">
   
    <nav aria-label="breadcrumb" class="mb-6">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('landing') }}" class="text-decoration-none breadcrumb-link">Beranda</a></li>
            <li class="breadcrumb-item active">{{ $album->judul ?? 'Detail Galeri' }}</li>
        </ol>
    </nav>

    <div class="position-relative mb-6">
        <div class="hero-gradient position-absolute top-0 start-0 w-100 h-100 rounded-3"></div>
        <div class="position-relative bg-light rounded-3 overflow-hidden p-4 text-center">
            <div class="hero-pattern position-absolute top-0 start-0 w-100 h-100 opacity-5"></div>
            <div class="position-relative">
                <div class="d-flex align-items-center justify-content-center gap-3 mb-3">
                    <div class="d-inline-flex align-items-center justify-content-center rounded-circle bg-primary bg-opacity-10" style="width: 50px; height: 50px;">
                        <i class="fas fa-images text-primary"></i>
                    </div>
                    <h1 class="fw-bold mb-0 animate-fade-in">{{ $album->judul ?? 'Galeri Kami' }}</h1>
                </div>
                <p class="text-muted lead mb-3 animate-slide-up">Koleksi foto dan momen berharga yang kami dokumentasikan</p>
                
            </div>
        </div>
    </div>

    <div class="mb-6">
        <div class="d-flex flex-wrap gap-3 justify-content-between align-items-center">
            <div class="search-box flex-grow-1" style="max-width: 400px;">
                <form class="position-relative">
                    <input class="form-control search-input search" type="search" placeholder="Cari foto..." aria-label="Search" />
                    <span class="fas fa-search search-box-icon"></span>
                </form>
            </div>
        </div>
    </div>

    
    <div class="row g-3" id="image_gallery" data-sl-isotope='{"layoutMode":"packery"}'>
        @if(isset($galleryItems) && $galleryItems->count() > 0)
            @foreach($galleryItems as $item)
                <a class="photography col-sm-6 col-md-4 col-xl-3 isotope-item" href="#!" 
                   data-bigpicture='{"gallery":"#image_gallery"}' 
                   data-bp="{{ asset('storage/uploads/albums/' . $item->img) }}">
                    <div class="hoverbox img-zoom-hover rounded-2">
                        <img class="img-fluid rounded" src="{{ asset('storage/uploads/albums/' . $item->img) }}" alt="{{ $item->img }}" />
                        <div class="hoverbox-content flex-center flex-column">
                            <h4 class="text-white">{{ $item->img }}</h4>
                            <p class="mb-0 text-secondary-lighter text-capitalize">{{ \Carbon\Carbon::parse($item->created_at)->format('d M Y') }}</p>
                        </div>
                    </div>
                </a>
            @endforeach
        @else
            <div class="col-12 text-center py-8">
                <div class="d-inline-flex align-items-center justify-content-center rounded-circle bg-light mb-4" style="width: 80px; height: 80px;">
                    <i class="fas fa-images text-muted fs-3"></i>
                </div>
                <h4 class="text-muted mb-2">Belum ada foto</h4>
                <p class="text-muted">Galeri ini belum memiliki foto. Silakan tambahkan foto untuk memulai.</p>
            </div>
        @endif
    </div>

</div>

@endsection
@push('js')
<style>
/* Hero Section Styles */
.hero-gradient {
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.1) 0%, rgba(25, 135, 84, 0.1) 100%);
}

.hero-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Breadcrumb Styles */
.breadcrumb-link {
    color: #0d6efd !important;
    transition: color 0.3s ease;
}

.breadcrumb-link:hover {
    color: #0a58ca !important;
}

/* Gallery Item Styles */
.gallery-item {
    transition: all 0.3s ease;
    cursor: pointer;
}

.gallery-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.gallery-item:hover .transition-img {
    transform: scale(1.1);
}

.gallery-item:hover .transition-overlay {
    opacity: 1;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
    transform: translateY(0);
}

.transition-img {
    transition: transform 0.5s ease;
}

.transition-overlay {
    transition: opacity 0.3s ease;
}

.gallery-overlay {
    transform: translateY(20px);
    transition: all 0.3s ease;
}

/* Hoverbox Styles */
.hoverbox {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.hoverbox img {
    transition: transform 0.5s ease;
}

.hoverbox:hover img {
    transform: scale(1.1);
}

.hoverbox-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 1rem;
}

.hoverbox:hover .hoverbox-content {
    opacity: 1;
}

/* Button Styles */
.btn-wish {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.btn-wish:hover {
    background: #0d6efd;
    color: white;
    transform: scale(1.1);
}

.hover-lift {
    transition: all 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-8px);
}

/* Animation Styles */
.animate-fade-in {
    animation: fadeIn 1s ease-in;
}

.animate-slide-up {
    animation: slideUp 0.8s ease-out 0.3s both;
}

.animate-slide-up-delay {
    animation: slideUp 0.8s ease-out 0.6s both;
}

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

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Styles */
@media (max-width: 768px) {
    .gallery-item:hover {
        transform: translateY(-4px);
    }
    
    .gallery-item {
        height: 200px !important;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize BigPicture for gallery items
    const galleryItems = document.querySelectorAll('[data-bigpicture]');
    
    galleryItems.forEach(item => {
        item.addEventListener('click', function(e) {
            e.preventDefault();
            
            const options = {
                el: this,
                gallery: '#image_gallery',
                imgSrc: this.getAttribute('data-bp')
            };
            
            BigPicture(options);
        });
    });

    // Initialize tooltips
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
    });

    // Intersection Observer for animations
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
            }
        });
    }, {
        threshold: 0.1
    });

    // Observe gallery items
    document.querySelectorAll('.gallery-item').forEach((item, index) => {
        item.style.opacity = '0';
        item.style.transform = 'translateY(20px)';
        item.style.transition = `opacity 0.6s ease ${index * 0.05}s, transform 0.6s ease ${index * 0.05}s`;
        observer.observe(item);
    });

    // Search functionality
    const searchInput = document.querySelector('.search-input');
    if (searchInput) {
        searchInput.addEventListener('input', function(e) {
            const searchTerm = e.target.value.toLowerCase();
            const galleryItems = document.querySelectorAll('.isotope-item');
            
            galleryItems.forEach(item => {
                const text = item.textContent.toLowerCase();
                if (text.includes(searchTerm)) {
                    item.style.display = 'block';
                } else {
                    item.style.display = 'none';
                }
            });
        });
    }

    // Isotope initialization if available
    if (typeof Isotope !== 'undefined') {
        const iso = new Isotope('#image_gallery', {
            itemSelector: '.isotope-item',
            layoutMode: 'packery',
            masonry: {
                columnWidth: '.isotope-item'
            }
        });

        // Filter functionality
        const filterLinks = document.querySelectorAll('[data-filter]');
        filterLinks.forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                
                // Update active state
                filterLinks.forEach(l => l.classList.remove('active'));
                this.classList.add('active');
                
                const filterValue = this.getAttribute('data-filter');
                iso.arrange({ filter: filterValue });
            });
        });
    }
});
</script>
@endpush