@php
    $galleries = App\Models\Gallery::where('status', 'active')
        ->with(['images', 'category']) // Add 'category' to eager loading
        ->orderBy('order_position', 'asc')
        ->orderBy('created_at', 'desc')
        ->get();

    // Get unique categories with their names from the relationship
    $categories = $galleries->pluck('category.name')->unique()->filter()->values();

    // Prepare images data as JSON for JavaScript
    $allImagesData = [];
    $categoryImagesData = [];

    foreach ($galleries as $gallery) {
        $categoryName = $gallery->category ? $gallery->category->name : 'Uncategorized';

        foreach ($gallery->images as $image) {
            $imageData = [
                'url' => asset($image->image_path),
                'caption' => $image->caption ?? '',
                'gallery_title' => $gallery->title,
                'category' => $categoryName, // Use category name instead of ID
            ];
            $allImagesData[] = $imageData;

            // Group by category name
            if (!isset($categoryImagesData[$categoryName])) {
                $categoryImagesData[$categoryName] = [];
            }
            $categoryImagesData[$categoryName][] = $imageData;
        }
    }
@endphp

@push('styles')
    <style>
        .gallery {
            padding-bottom: 2rem !important;
        }

        .gallery .container {
            padding-bottom: 1rem !important;
        }

        .gallery .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1) !important;
            transition: all 0.3s ease;
        }

        .gallery .card:hover .position-relative img {
            transform: scale(1.05);
        }

        .gallery .card:hover .position-relative .bg-dark {
            opacity: 1 !important;
        }

        .transition {
            transition: opacity 0.3s ease;
        }

        .object-fit-cover {
            object-fit: cover;
        }

        .btn-light.active {
            background-color: rgb(255, 10, 10) !important;
            color: white !important;
            border-color: var(--bs-primary) !important;
        }

        .btn-light.active .badge {
            background-color: rgb(255, 10, 10) !important;
            color: white !important;
        }

        .carousel-control-prev-icon,
        .carousel-control-next-icon {
            background-size: 50% 50%;
        }

        /* Ensure proper spacing at bottom of gallery grid */
        #galleryGrid {
            margin-bottom: 0;
        }

        #galleryGrid .gallery-item {
            margin-bottom: 1.5rem !important;
        }

        /* Additional bottom spacing for the last row */
        #galleryGrid:after {
            content: '';
            display: block;
            height: 1px;
            margin-bottom: 2rem;
        }

        @media (max-width: 768px) {
            .gallery .btn-light {
                padding: 0.5rem 1rem !important;
                font-size: 0.875rem;
            }

            #galleryGrid .gallery-item {
                margin-bottom: 1rem !important;
            }
        }
    </style>
@endpush

<!-- Image Gallery Start -->
<div class="container-fluid gallery py-5">
    <div class="container-fluid py-4">
        <div class="text-center mb-5">
            <h4 class="text-primary fw-bold text-uppercase mb-2" style="letter-spacing: 2px;">Gallery</h4>
            <h1 class="display-4 fw-bold mb-0">Program <span class="text-primary">Gallery</span></h1>
        </div>

        @if (count($allImagesData) > 0)
            <!-- Category Tabs -->
            <div class="text-center mb-5">
                <div class="d-flex flex-wrap justify-content-center gap-2" id="galleryTabs">
                    <button class="btn btn-light rounded-pill px-4 py-2 fw-semibold active" data-category="all">
                        All <span
                            class="badge bg-secondary bg-opacity-25 text-dark ms-1">{{ count($allImagesData) }}</span>
                    </button>
                    @foreach ($categories as $category)
                        <button class="btn btn-light rounded-pill px-4 py-2 fw-semibold"
                            data-category="{{ $category }}">
                            {{ $category }} <span
                                class="badge bg-secondary bg-opacity-25 text-dark ms-1">{{ count($categoryImagesData[$category] ?? []) }}</span>
                        </button>
                    @endforeach
                </div>
            </div>

            <!-- Gallery Grid -->
            <div class="row g-4" id="galleryGrid">
                @foreach ($allImagesData as $index => $image)
                    <div class="col-sm-6 col-md-4 col-lg-3 gallery-item mb-4" data-category="{{ $image['category'] }}">
                        <div class="card border-0 shadow-sm h-100 overflow-hidden"
                            style="border-radius: 16px; cursor: pointer;" onclick="openLightbox({{ $index }})">
                            <div class="position-relative overflow-hidden" style="height: 260px;">
                                <img src="{{ $image['url'] }}" class="w-100 h-100 object-fit-cover"
                                    alt="{{ $image['gallery_title'] }}" style="transition: transform 0.3s ease;">
                                <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark bg-opacity-40 d-flex align-items-center justify-content-center opacity-0 transition"
                                    style="transition: opacity 0.3s ease;">
                                    <i class="fas fa-search-plus fa-3x text-white"></i>
                                </div>
                            </div>
                            <div class="card-body p-3">
                                {{-- <h6 class="fw-bold mb-1 text-truncate">{{ $image['gallery_title'] }}</h6> --}}
                                @if ($image['caption'])
                                    <small class="text-muted text-truncate d-block">
                                        <i class="fas fa-image text-primary me-1"></i>
                                        {{ Str::limit($image['caption'], 50) }}
                                    </small>
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <!-- Bottom spacing for better visual balance -->
            <div class="mt-5 pt-3"></div>
        @else
            <div class="text-center py-5">
                <i class="fas fa-images fa-4x text-primary mb-3"></i>
                <h4 class="text-muted">No Gallery Images Available</h4>
                <p class="text-muted">Check back later for updates!</p>
            </div>
        @endif
    </div>
</div>

<!-- Lightbox Modal -->
<div class="modal fade" id="lightboxModal" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog modal-fullscreen-md-down modal-xl modal-dialog-centered">
        <div class="modal-content bg-transparent border-0">
            <div class="modal-body p-0">
                <div id="lightboxCarousel" class="carousel slide" data-bs-ride="carousel">
                    <div class="carousel-indicators" id="lightboxIndicators"></div>
                    <div class="carousel-inner" id="lightboxCarouselInner"></div>
                    <button class="carousel-control-prev" type="button" data-bs-target="#lightboxCarousel"
                        data-bs-slide="prev">
                        <span class="carousel-control-prev-icon bg-primary rounded-circle p-3"
                            aria-hidden="true"></span>
                        <span class="visually-hidden">Previous</span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#lightboxCarousel"
                        data-bs-slide="next">
                        <span class="carousel-control-next-icon bg-primary rounded-circle p-3"
                            aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                    </button>
                </div>
                <div class="text-center mt-3">
                    <div class="d-inline-block bg-dark bg-opacity-75 rounded-pill px-4 py-2">
                        <p class="mb-0 text-white" id="lightboxCaption"></p>
                    </div>
                    <button type="button" class="btn-close btn-close-white bg-dark rounded-circle p-2 ms-3"
                        data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
    <script>
        // Simple gallery data
        const galleryImages = @json($allImagesData);
        let currentLightboxIndex = 0;

        // Tab filtering
        document.querySelectorAll('#galleryTabs .btn').forEach(btn => {
            btn.addEventListener('click', function() {
                // Update active tab
                document.querySelectorAll('#galleryTabs .btn').forEach(b => b.classList.remove('active'));
                this.classList.add('active');

                // Filter images
                const category = this.dataset.category;
                const items = document.querySelectorAll('#galleryGrid .gallery-item');

                items.forEach(item => {
                    if (category === 'all' || item.dataset.category === category) {
                        item.style.display = '';
                    } else {
                        item.style.display = 'none';
                    }
                });
            });
        });

        // Lightbox functions
        function openLightbox(index) {
            currentLightboxIndex = index;
            updateLightbox();
            const modal = new bootstrap.Modal(document.getElementById('lightboxModal'));
            modal.show();
        }

        function updateLightbox() {
            const carouselInner = document.getElementById('lightboxCarouselInner');
            const indicators = document.getElementById('lightboxIndicators');
            const captionEl = document.getElementById('lightboxCaption');

            // Get visible images based on current filter
            const activeTab = document.querySelector('#galleryTabs .btn.active');
            const currentCategory = activeTab ? activeTab.dataset.category : 'all';

            let visibleImages = [];
            if (currentCategory === 'all') {
                visibleImages = galleryImages;
            } else {
                visibleImages = galleryImages.filter(img => img.category === currentCategory);
            }

            // Adjust index to find correct image in filtered set
            let adjustedIndex = 0;
            if (currentCategory !== 'all') {
                const currentImageId = galleryImages[currentLightboxIndex]?.url;
                adjustedIndex = visibleImages.findIndex(img => img.url === currentImageId);
                if (adjustedIndex === -1) adjustedIndex = 0;
            } else {
                adjustedIndex = currentLightboxIndex;
            }

            // Build carousel
            carouselInner.innerHTML = '';
            indicators.innerHTML = '';

            visibleImages.forEach((img, idx) => {
                // Add indicator
                const indicator = document.createElement('button');
                indicator.type = 'button';
                indicator.setAttribute('data-bs-target', '#lightboxCarousel');
                indicator.setAttribute('data-bs-slide-to', idx);
                if (idx === adjustedIndex) indicator.classList.add('active');
                indicators.appendChild(indicator);

                // Add carousel item
                const item = document.createElement('div');
                item.className = `carousel-item ${idx === adjustedIndex ? 'active' : ''}`;
                item.innerHTML = `
            <div class="d-flex justify-content-center align-items-center" style="min-height: 60vh;">
                <img src="${img.url}" class="d-block w-100" style="max-height: 80vh; object-fit: contain;" alt="${img.gallery_title}">
            </div>
        `;
                carouselInner.appendChild(item);
            });

            // Update caption
            if (visibleImages[adjustedIndex]) {
                captionEl.textContent = visibleImages[adjustedIndex].caption || visibleImages[adjustedIndex].gallery_title;
            }

            // Reinitialize carousel to prevent conflicts
            const carouselElement = document.getElementById('lightboxCarousel');
            const bsCarousel = bootstrap.Carousel.getOrCreateInstance(carouselElement);
            bsCarousel.to(adjustedIndex);

            // Handle slide change event
            carouselElement.removeEventListener('slid.bs.carousel', handleSlide);
            carouselElement.addEventListener('slid.bs.carousel', handleSlide);

            function handleSlide(e) {
                const newIdx = e.to;
                if (visibleImages[newIdx]) {
                    captionEl.textContent = visibleImages[newIdx].caption || visibleImages[newIdx].gallery_title;
                }
            }
        }

        // Hover effect for cards (CSS handles most, adding JS for any dynamic)
        document.querySelectorAll('#galleryGrid .card').forEach(card => {
            card.addEventListener('mouseenter', () => {
                const overlay = card.querySelector('.bg-dark');
                if (overlay) overlay.style.opacity = '1';
            });
            card.addEventListener('mouseleave', () => {
                const overlay = card.querySelector('.bg-dark');
                if (overlay) overlay.style.opacity = '0';
            });
        });
    </script>
@endpush