{{-- Gallery /gallery — variant para demo-creative-portfolio.
     Layout dark con tabs por categoría. Hereda Porto + scope CSS demo.
     $galleries y $categories vienen del controller.
--}}
@php
    $pageTitle    = config('site.modules.gallery.page_header.title', __('Portfolio'));
    $pageSubtitle = config('site.modules.gallery.page_header.subtitle', __('Trabajos seleccionados, organizados por categoría.'));
@endphp

<div role="main" class="main">

    {{-- Page hero --}}
    <section class="section section-no-border bg-transparent m-0 cp-page-hero">
        <div class="container">
            <div class="row align-items-end min-vh-50">
                <div class="col-lg-10">
                    <p class="cp-eyebrow mb-3">{{ __('Portfolio') }}</p>
                    <h1 class="cp-page-hero__title">{{ $pageTitle }}</h1>
                    @if($pageSubtitle)
                        <p class="cp-page-hero__subtitle">{{ $pageSubtitle }}</p>
                    @endif
                </div>
            </div>
        </div>
    </section>

    {{-- Gallery con tabs --}}
    <section class="section section-no-border bg-transparent border-0 cp-section py-6">
        <div class="container">

            @if(isset($categories) && $categories->count() > 0)
                <div class="cp-gallery__tabs mb-5" role="tablist">
                    <button type="button" class="cp-gallery__tab cp-gallery__tab--active" data-filter="*" role="tab" aria-selected="true">
                        {{ __('Todo') }}
                    </button>
                    @foreach($categories as $cat)
                        <button type="button" class="cp-gallery__tab" data-filter=".cp-gallery-category-{{ $cat->slug }}" role="tab" aria-selected="false">
                            {{ $cat->name }}
                        </button>
                    @endforeach
                </div>
            @endif

            <div class="cp-gallery__grid" id="cpGalleryGridFull">
                @forelse($galleries as $gallery)
                    @php
                        $catSlug = '';
                        $catName = '';
                        if (isset($categories) && $gallery->category_id) {
                            $cat = $categories->firstWhere('id', $gallery->category_id);
                            if ($cat) {
                                $catSlug = $cat->slug;
                                $catName = $cat->name;
                            }
                        }
                        $isVideo = !empty($gallery->video_url) && $gallery->youtube_id;
                        $imgUrl = !empty($gallery->img)
                            ? (filter_var($gallery->img, FILTER_VALIDATE_URL) ? $gallery->img : asset($gallery->img))
                            : ($gallery->youtube_thumbnail ?? asset('cd-project/img/defaults/gallery/gallery-' . (($loop->index % 6) + 1) . '.jpg'));
                        $aspect      = $gallery->aspect_ratio ?: '16:9';
                        $aspectCls   = 'cp-gallery__item--ar-' . str_replace(':', '-', $aspect);
                        // URL del lightbox: imagen full size, o YouTube embed con autoplay
                        // Sin autoplay: Chrome bloquea autoplay con audio y muestra el error
                        // de YouTube. Magnific abre el iframe; el user clicka play. UX más controlada.
                        // rel=0 evita videos relacionados de otros canales al final.
                        $lightboxHref = $isVideo
                            ? 'https://www.youtube.com/embed/' . $gallery->youtube_id . '?rel=0&modestbranding=1'
                            : $imgUrl;
                    @endphp
                    <a href="{{ $lightboxHref }}"
                       class="cp-gallery__item {{ $aspectCls }} cp-gallery-category-{{ $catSlug }} {{ $isVideo ? 'cp-gallery__item--video cp-mfp-iframe' : 'cp-mfp-image' }}"
                       title="{{ $gallery->title }}"
                       @if($isVideo) data-mfp-type="iframe" @else data-mfp-type="image" @endif>
                        <img src="{{ $imgUrl }}" alt="{{ $gallery->title }}" loading="lazy">
                        @if($isVideo)
                            <span class="cp-gallery__play-icon" aria-hidden="true">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                            </span>
                        @endif
                        <div class="cp-gallery__item-meta">
                            @if($catName)<span class="cp-gallery__item-cat">{{ $catName }}</span>@endif
                            <h4 class="cp-gallery__item-title">{{ $gallery->title }}</h4>
                        </div>
                    </a>
                @empty
                    <p class="text-center text-color-grey py-5">{{ __('Aún no hay trabajos publicados.') }}</p>
                @endforelse
            </div>

        </div>
    </section>

</div>

<script>
    (function() {
        var tabs = document.querySelectorAll('.cp-gallery__tab');
        var grid = document.getElementById('cpGalleryGridFull');
        if (!tabs.length || !grid) return;

        // Tabs filtering
        tabs.forEach(function(tab) {
            tab.addEventListener('click', function() {
                tabs.forEach(function(t) {
                    t.classList.remove('cp-gallery__tab--active');
                    t.setAttribute('aria-selected', 'false');
                });
                this.classList.add('cp-gallery__tab--active');
                this.setAttribute('aria-selected', 'true');

                var filter = this.getAttribute('data-filter');
                grid.querySelectorAll('.cp-gallery__item').forEach(function(item) {
                    if (filter === '*' || item.classList.contains(filter.substring(1))) {
                        item.classList.remove('cp-gallery__item--hidden');
                    } else {
                        item.classList.add('cp-gallery__item--hidden');
                    }
                });
            });
        });
    })();

    // Magnific-popup init — separa imágenes (gallery navigation) y videos (iframe single)
    // Espera a que jQuery + magnific estén cargados (vienen en plugins.min.js).
    (function initMagnificCp() {
        if (typeof window.jQuery === 'undefined' || typeof window.jQuery.fn.magnificPopup === 'undefined') {
            return setTimeout(initMagnificCp, 100);
        }
        var $ = window.jQuery;
        // Imágenes — gallery con flechas, ESC, click fuera, swipe mobile
        $('#cpGalleryGridFull').magnificPopup({
            delegate: '.cp-mfp-image',
            type: 'image',
            mainClass: 'mfp-cp-fade',
            removalDelay: 300,
            closeBtnInside: false,
            gallery: { enabled: true, navigateByImgClick: true, preload: [0, 1] },
            image: { titleSrc: 'title' }
        });
        // Videos — iframe single (cada video se abre individual).
        // IMPORTANTE: customizar pattern YouTube para que parsee cualquier
        // formato de URL (/embed/, /watch?v=, /shorts/, youtu.be/) y NO
        // agregue autoplay=1 que dispara el bloqueo de Chrome.
        $('#cpGalleryGridFull .cp-mfp-iframe').magnificPopup({
            type: 'iframe',
            mainClass: 'mfp-cp-fade',
            removalDelay: 300,
            iframe: {
                patterns: {
                    youtube: {
                        index: 'youtube.com',
                        id: function(url) {
                            var m = url.match(/(?:embed\/|watch\?v=|shorts\/|v\/)([\w-]{11})/);
                            return m ? m[1] : null;
                        },
                        src: 'https://www.youtube.com/embed/%id%?rel=0&modestbranding=1'
                    },
                    youtubeShort: {
                        index: 'youtu.be/',
                        id: function(url) {
                            var m = url.match(/youtu\.be\/([\w-]{11})/);
                            return m ? m[1] : null;
                        },
                        src: 'https://www.youtube.com/embed/%id%?rel=0&modestbranding=1'
                    },
                    vimeo: {
                        index: 'vimeo.com/',
                        id: function(url) {
                            var m = url.match(/vimeo\.com\/(\d+)/);
                            return m ? m[1] : null;
                        },
                        src: 'https://player.vimeo.com/video/%id%'
                    }
                },
                markup: '<div class="mfp-iframe-scaler">' +
                            '<div class="mfp-close"></div>' +
                            '<iframe class="mfp-iframe" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen" allowfullscreen></iframe>' +
                        '</div>'
            }
        });
    })();
</script>