@extends('layout.front.master')

@php
    $galleryModuleName = config('site.modules.gallery.page_header.title', config('cd-system.modules.gallery.name', 'Galería'));
    $galleryDescription = config('site.modules.gallery.page_header.subtitle', 'Explora nuestra galería de imágenes y contenido visual.');
    $galleryImage = $galleries->isNotEmpty() ? (filter_var($galleries->first()->img, FILTER_VALIDATE_URL) ? $galleries->first()->img : asset($galleries->first()->img)) : brand_og_image();
@endphp
@section('title', $galleryModuleName)
@section('description', $galleryDescription)
@section('keywords', config('site.seo.keywords') . ', galería, imágenes, fotos, proyectos')

{{-- Open Graph Meta Tags --}}
@section('og_title', $galleryModuleName)
@section('og_description', $galleryDescription)
@section('og_image', $galleryImage)
@section('og_type', 'website')
@section('og_url', url()->current())

{{-- Twitter Card Meta Tags --}}
@section('twitter_title', $galleryModuleName)
@section('twitter_description', $galleryDescription)
@section('twitter_image', $galleryImage)

@section('content')

@php
    // Detectar si el demo activo es demo-photography-3 para personalizar la vista
    $activeDemo = get_active_demo();
    $isPhotography3 = ($activeDemo === 'demo-photography-3');
    // Determinar clases CSS según si hay sidebar o no
    $sidebarColClass = $isPhotography3 ? 'd-none' : 'col-lg-3 order-2 order-lg-1';
    $contentColClass = $isPhotography3 ? 'col-12' : 'col-lg-9 order-1 order-lg-2';
@endphp

@include('modules.gallery.frontend.partials.dynamic-header')


{{-- Lightbox fullscreen — uses Porto's exact IDs so custom.js handles it --}}
<div id="photographyLightbox" class="mfp-hide">
    <div class="thumb-gallery">
        <div class="owl-carousel owl-theme manual thumb-gallery-detail" id="thumbGalleryDetail">
            @foreach ($galleries->reverse() as $gallery)
                @php $imgUrl = !empty($gallery->img) ? (filter_var($gallery->img, FILTER_VALIDATE_URL) ? $gallery->img : asset($gallery->img)) : ''; @endphp
                <div>
                    <span class="img-thumbnail d-block">
                        <img alt="{{ $gallery->title }}" src="{{ $imgUrl }}" class="img-fluid">
                    </span>
                </div>
            @endforeach
        </div>
        <div class="owl-carousel owl-theme manual thumb-gallery-thumbs show-thumbs mt" id="thumbGalleryThumbs">
            @foreach ($galleries->reverse() as $gallery)
                @php $imgUrl = !empty($gallery->img) ? (filter_var($gallery->img, FILTER_VALIDATE_URL) ? $gallery->img : asset($gallery->img)) : ''; @endphp
                <div>
                    <span class="img-thumbnail d-block cur-pointer">
                        <img alt="{{ $gallery->title }}" src="{{ $imgUrl }}">
                    </span>
                </div>
            @endforeach
        </div>
    </div>
</div>

{{-- Gallery Content --}}
<section id="gallery-content" class="section border-0 my-0 py-4" style="background-color: var(--secondary);">
    <div class="container container-xl-custom py-0">
        {{-- Category pills (horizontal, above grid — replaces sidebar on visual modules) --}}
        @if(!$isPhotography3)
        <div class="d-flex flex-wrap gap-2 mb-4 align-items-center">
            <a href="{{ route('gallery') }}" class="btn btn-sm rounded-pill px-3 py-1 {{ !isset($currentCategory) && !isset($tag) ? 'btn-primary' : 'btn-outline-light' }}">
                Todas ({{ $galleries->count() }})
            </a>
            @foreach($categories->sortBy('name') as $category)
                @if($category->galleries_count > 0)
                <a href="{{ route('gallery.category', ['slug' => $category->slug]) }}" class="btn btn-sm rounded-pill px-3 py-1 {{ isset($currentCategory) && $currentCategory->id === $category->id ? 'btn-primary' : 'btn-outline-light' }}">
                    {{ $category->name }} ({{ $category->galleries_count }})
                </a>
                @endif
            @endforeach

            {{-- Tag pills separator --}}
            @if($tags->count() > 0)
                <span class="text-muted mx-1">|</span>
                @foreach($tags->sortBy('name') as $gtag)
                    <a href="{{ route('gallery.tag', ['slug' => $gtag->slug]) }}" class="btn btn-sm rounded-pill px-3 py-1 {{ isset($tag) && $tag->id === $gtag->id ? 'btn-primary' : 'btn-outline-primary' }}">
                        {{ $gtag->name }}
                    </a>
                @endforeach
            @endif
        </div>
        @endif

        {{-- Active filter indicator --}}
        @if(isset($currentCategory))
            <div class="mb-3">
                <span class="text-muted">Filtrando por:</span>
                <span class="badge bg-primary rounded-pill px-3 py-1 ms-1">{{ $currentCategory->name }}</span>
                <a href="{{ route('gallery') }}" class="text-muted ms-2 text-decoration-none"><i class="fas fa-times"></i></a>
            </div>
        @elseif(isset($tag))
            <div class="mb-3">
                <span class="text-muted">Filtrando por tag:</span>
                <span class="badge bg-primary rounded-pill px-3 py-1 ms-1">{{ $tag->name }}</span>
                <a href="{{ route('gallery') }}" class="text-muted ms-2 text-decoration-none"><i class="fas fa-times"></i></a>
            </div>
        @endif

        {{-- Gallery Grid --}}
        <div class="row">
            <div class="col-12">
                @if($galleries->isNotEmpty())
                    <div class="row g-3" id="galleryGrid">
                        @foreach($galleries->reverse() as $index => $gallery)
                            @php $imgUrl = !empty($gallery->img) ? (filter_var($gallery->img, FILTER_VALIDATE_URL) ? $gallery->img : asset($gallery->img)) : asset('cd-project/img/default-team-member.png'); @endphp
                            <div class="col-6 col-md-4 col-lg-3">
                                <div class="portfolio-grid-item">
                                    <a href="#photographyLightbox" class="popup-with-move-anim gallery-item d-block overflow-hidden" style="border-radius: 8px; aspect-ratio: 4/3; position: relative; cursor: pointer;">
                                        <img src="{{ $imgUrl }}" alt="{{ $gallery->title }}" class="w-100 h-100" style="object-fit: cover; transition: transform 0.4s ease;" loading="lazy" onmouseover="this.style.transform='scale(1.06)'" onmouseout="this.style.transform='scale(1)'">
                                        <div class="position-absolute bottom-0 start-0 end-0 p-2" style="background: linear-gradient(transparent, rgba(0,0,0,0.7));">
                                            <span class="text-white text-2 d-block text-truncate">{{ $gallery->title }}</span>
                                            @if($gallery->category)
                                                <span class="text-1" style="color: var(--primary);">{{ $gallery->category->name }}</span>
                                            @endif
                                        </div>
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <!-- Mensaje Galería Vacía -->
                    <div class="text-center py-5">
                        <div class="overflow-hidden mb-3">
                            <i class="fas fa-camera text-color-primary appear-animation" data-appear-animation="fadeIn" style="font-size: 3rem; opacity: 0.4;"></i>
                        </div>
                        <div class="overflow-hidden mb-2">
                            <h2 class="font-weight-normal text-7 ls-1 mb-0 appear-animation" data-appear-animation="maskUp" style="animation-delay: 100ms;">
                                <strong class="font-weight-extra-bold">{{ config('site.gallery.empty_title', 'Próximamente') }}</strong>
                            </h2>
                        </div>
                        <div class="overflow-hidden mb-1">
                            <p class="lead mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="200" style="animation-delay: 200ms;">
                                {{ config('site.gallery.empty_text', 'Estamos cargando contenido. Volvé pronto.') }}
                            </p>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</section>

{{-- Porto's custom.js handles lightbox init + clickedItem via parent().parent().index() --}}
{{-- The .portfolio-grid-item wrapper ensures the DOM structure matches Porto's expectations --}}

@endsection