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

<div class="content">
    <!-- Enhanced Hero Section -->
    <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: 60px; height: 60px;">
                        <i class="fas fa-images text-primary"></i>
                    </div>
                    <h1 class="display-5 fw-bold mb-0 animate-fade-in">Album Keluarga</h1>
                </div>
                <p class="lead text-muted mb-3 animate-slide-up">Koleksi foto-foto kenangan indah bersama keluarga</p>
                <div class="d-flex justify-content-center gap-2 animate-slide-up-delay">
                    <span class="badge bg-primary bg-opacity-10 text-primary px-3 py-2"><i class="fas fa-camera me-1"></i> {{ $albums->count() }} Album</span>
                    <span class="badge bg-success bg-opacity-10 text-success px-3 py-2"><i class="fas fa-clock me-1"></i> {{ $tgl }}</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Breadcrumb -->
    <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</li>
        </ol>
    </nav>

    <!-- Search and Filter Section -->
    <div class="mb-6">
        <div class="row align-items-center">
            <div class="col-md-9">
                <div class="d-flex align-items-center gap-3">
                    <span class="badge bg-primary bg-opacity-10 text-primary px-3 py-2">
                        <i class="fas fa-images me-1"></i> Galeri Foto
                    </span>
                    <span class="text-muted small">{{ $albums->count() }} album tersedia</span>
                </div>
            </div>
            <div class="col-md-3">
                <div class="search-box">
                    <div class="position-relative">
                        <input class="form-control search-input ps-4 pe-5 border-0 bg-light" type="search" placeholder="Cari album..." aria-label="Search" />
                        <span class="fas fa-search position-absolute top-50 translate-middle-y text-muted" style="left: 15px;"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
        <!-- Filter Navigation -->
      
        <!-- Albums Grid -->
        <div class="tab-content" id="albumFiltersContent">
            <div class="tab-pane fade show active" id="all" role="tabpanel">
                <div class="row g-4">
                    @forelse($albums as $album)
                    <div class="col-sm-6 col-md-4 col-xl-3">
                        <div class="album-card h-100">
                            <a href="{{ route('album.detail', $album->id) }}" class="text-decoration-none">
                                <div class="album-preview position-relative overflow-hidden rounded-3 mb-3">
                                    @if($album->random_images && $album->random_images->count() > 0)
                                        <div class="album-grid">
                                            @foreach($album->random_images->take(3) as $index => $image)
                                                <div class="album-image {{ $index === 0 ? 'main' : 'thumbnail' }}">
                                                    <img src="{{ asset('storage/uploads/albums/' . $image->img) }}" 
                                                         alt="{{ $album->judul }}" 
                                                         class="w-100 h-100 object-fit-cover"
                                                         loading="lazy" />
                                                </div>
                                            @endforeach
                                        </div>
                                    @else
                                        <div class="album-placeholder">
                                            <div class="placeholder-content">
                                                <i class="fas fa-images fa-3x text-muted mb-3"></i>
                                                <p class="text-muted">Belum ada foto</p>
                                            </div>
                                        </div>
                                    @endif
                                    
                                    <!-- Overlay with album count -->
                                    <div class="album-overlay">
                                        <div class="overlay-content">
                                            <i class="fas fa-camera fa-2x mb-2"></i>
                                            <span class="fw-bold">{{ $album->pg_albums ? $album->pg_albums->count() : 0 }} Foto</span>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="album-info p-3">
                                    <h4 class="fw-bold mb-3 text-dark">{{ $album->judul }}</h4>
                                    <p class="text-muted small mb-0">
                                        <i class="fas fa-calendar-alt me-1"></i>
                                        {{ \Carbon\Carbon::parse($album->created_at)->format('d M Y') }}
                                    </p>
                                </div>
                            </a>
                        </div>
                    </div>
                    @empty
                    <div class="col-12">
                        <div class="text-center py-8">
                            <div class="d-inline-flex align-items-center justify-content-center rounded-circle bg-light mb-4" style="width: 100px; height: 100px;">
                                <i class="fas fa-folder-open fa-3x text-muted"></i>
                            </div>
                            <h4 class="fw-bold mb-3">Belum Ada Album</h4>
                            <p class="text-muted">Album foto akan segera tersedia. Silakan kembali lagi nanti.</p>
                        </div>
                    </div>
                    @endforelse
                </div>
                
                <!-- Pagination -->
                @if($albums->hasPages())
                <div class="row mt-6">
                    <div class="col-12">
                        <nav aria-label="Album pagination">
                            <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                                <div class="text-muted small">
                                    Menampilkan {{ $albums->firstItem() }} - {{ $albums->lastItem() }} dari {{ $albums->total() }} album
                                </div>
                                <div class="pagination-wrapper">
                                    {{ $albums->links() }}
                                </div>
                            </div>
                        </nav>
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

@endsection
@push('js')
<style>
.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='%23ffffff' 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-link {
    color: #0d6efd !important;
    transition: color 0.3s ease;
}

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

.search-box {
    position: relative;
}

.search-input {
    border: 2px solid #e9ecef;
    border-radius: 25px;
    padding: 10px 20px;
    transition: all 0.3s ease;
}

.search-input:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.album-card {
    transition: all 0.3s ease;
    border-radius: 12px;
    overflow: hidden;
}

.album-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.album-preview {
    height: 200px;
    background: #f8f9fa;
    position: relative;
}

.album-grid {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
}

.album-image.main {
    grid-row: 1 / 3;
    grid-column: 1;
}

.album-image.thumbnail:first-of-type {
    grid-row: 1;
    grid-column: 2;
}

.album-image.thumbnail:last-of-type {
    grid-row: 2;
    grid-column: 2;
}

.album-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.7));
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

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

.overlay-content {
    color: white;
    text-align: center;
    padding: 1rem;
}

.album-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
}

.placeholder-content {
    text-align: center;
}

.album-info h4 {
    transition: color 0.3s ease;
}

.album-card:hover .album-info h4 {
    color: #0d6efd;
}

.nav-pills .nav-link {
    border-radius: 25px;
    padding: 8px 20px;
    transition: all 0.3s ease;
}

.nav-pills .nav-link.active {
    background: linear-gradient(135deg, #0d6efd, #198754);
}

.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);
    }
}

.pagination-wrapper .pagination {
    margin-bottom: 0;
}

.pagination-wrapper .page-link {
    border: none;
    color: #6c757d;
    padding: 8px 12px;
    margin: 0 2px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.pagination-wrapper .page-link:hover {
    background: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
    transform: translateY(-2px);
}

.pagination-wrapper .page-item.active .page-link {
    background: linear-gradient(135deg, #0d6efd, #198754);
    color: white;
    border: none;
}

.pagination-wrapper .page-item.disabled .page-link {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .album-preview {
        height: 150px;
    }
    
    .nav-pills .nav-link {
        padding: 6px 12px;
        font-size: 0.875rem;
    }
    
    .pagination-wrapper .page-link {
        padding: 6px 10px;
        font-size: 0.875rem;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Search functionality
    const searchInput = document.querySelector('.search-input');
    if (searchInput) {
        searchInput.addEventListener('input', function(e) {
            const searchTerm = e.target.value.toLowerCase();
            const albumCards = document.querySelectorAll('.album-card');
            
            albumCards.forEach(card => {
                const title = card.querySelector('h4').textContent.toLowerCase();
                if (title.includes(searchTerm)) {
                    card.style.display = 'block';
                } else {
                    card.style.display = 'none';
                }
            });
        });
    }
    
    // Add 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 all album cards
    document.querySelectorAll('.album-card').forEach(card => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(20px)';
        card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
        observer.observe(card);
    });
});
</script>
@endpush