@extends('layout.front.master')

@section('title', 'Galería | ' . config('site.name'))
@section('description', 'Explora nuestra galería de imágenes de proyectos y obras realizadas por Constructora Gama S.A. Fotografías de infraestructura, viviendas y proyectos arquitectónicos.')
@section('keywords', config('site.seo.keywords') . ', galería, imágenes, fotos, proyectos, obras')

{{-- Open Graph Meta Tags --}}
@php
    $galleryImage = $galleries->isNotEmpty() ? (filter_var($galleries->first()->img, FILTER_VALIDATE_URL) ? $galleries->first()->img : asset($galleries->first()->img)) : asset('cd-project/img/meta-tags/og-image.png');
@endphp
@section('og_title', 'Galería | ' . config('site.name'))
@section('og_description', 'Explora nuestra galería de imágenes de proyectos y obras realizadas por Constructora Gama S.A. Fotografías de infraestructura, viviendas y proyectos arquitectónicos.')
@section('og_image', $galleryImage)
@section('og_type', 'website')
@section('og_url', url()->current())

{{-- Twitter Card Meta Tags --}}
@section('twitter_title', 'Galería | ' . config('site.name'))
@section('twitter_description', 'Explora nuestra galería de imágenes de proyectos y obras realizadas por Constructora Gama S.A.')
@section('twitter_image', $galleryImage)

@section('content')

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


{{-- LIGHTBOX --}}
<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)
                <div>
                    <span class="img-thumbnail d-block">
                        <img alt="{{ $gallery->title }}" src="{{ asset($gallery->img) }}" 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)
                <div>
                    <span class="img-thumbnail d-block cur-pointer">
                        <img alt="{{ $gallery->title }}" src="{{ asset($gallery->img) }}">
                    </span>
                </div>
            @endforeach
        </div>
    </div>
</div>

{{-- Gallery Content --}}
<section class="section border-0 my-0" style="padding-top: 8rem;">
    <div class="container container-xl-custom py-0">
        <div class="row justify-content-center">
            <div class="col-lg-3 order-2 order-lg-1">
                <aside class="sidebar position-sticky" style="top: 100px;">
                    <h5 class="font-weight-semi-bold">{{ __('Álbumes de fotos') }}</h5>
                    <ul class="nav nav-list flex-column">
                        <li class="nav-item">
                            <a class="nav-link {{ !isset($currentCategory) && !isset($tag) ? 'active' : '' }}" href="{{ route('gallery') }}">
                                {{ __('VER TODAS') }}
                            </a>
                        </li>
                        @foreach($categories->sortBy('name') as $category)
                            <li class="nav-item">
                                <a class="nav-link {{ isset($currentCategory) && $currentCategory->id === $category->id ? 'active' : '' }}" href="{{ route('gallery.category', ['slug' => $category->slug]) }}">
                                    {{ strtoupper($category->name) }} ({{ $category->galleries_count }})
                                </a>
                            </li>
                        @endforeach
                    </ul>

                    <h5 class="font-weight-semi-bold pt-5">{{ __('Tags') }}</h5>
                    <div class="mb-3 pb-1">
                        @foreach($tags->sortBy('name') as $tag)
                            <a href="{{ route('gallery.tag', ['slug' => $tag->slug]) }}">
                                <span class="badge badge-primary badge-sm rounded-pill text-uppercase px-2 py-1 me-1">
                                    {{ strtoupper($tag->name) }}
                                </span>
                            </a>
                        @endforeach
                    </div>
                </aside>
            </div>
            <div class="col-lg-9 order-1 order-lg-2">
                @if($galleries->isNotEmpty())
                    <!-- Categorías para ordenar -->
                    <ul class="nav nav-pills sort-source sort-source-style-3 justify-content-center d-none" data-sort-id="portfolio-new" data-option-key="filter" data-plugin-options="{'layoutMode': 'masonry', 'filter': '*'}">
                        <li class="nav-item">
                            <a class="nav-link {{ !isset($currentCategory) ? 'active' : '' }}" href="{{ route('gallery') }}">
                                VER TODAS
                            </a>
                        </li>

                        @foreach($categories->sortBy('name') as $category)
                            <li class="nav-item">
                                <a class="nav-link {{ isset($currentCategory) && $currentCategory->id === $category->id ? 'active' : '' }}" href="{{ route('gallery.category', ['slug' => $category->slug]) }}">
                                    {{ strtoupper($category->name) }} ({{ $category->galleries_count }})
                                </a>
                            </li>
                        @endforeach
                    </ul>

                    <!-- Galería superior -->
                    <div class="sort-destination-loader sort-destination-loader-showing mt-4 pt-2">
                        <div class="row portfolio-list sort-destination" data-sort-id="portfolio-new">
                            @foreach($galleries->reverse() as $gallery)
                                <div class="col-md-6 col-lg-4 isotope-item {{ isset($gallery->category) && !empty($gallery->category->slug) ? strtolower($gallery->category->slug) : 'ver-todo' }}">
                                    <div class="portfolio-item">
                                        <a href="#photographyLightbox" class="text-decoration-none popup-with-move-anim">
                                            <span class="thumb-info thumb-info-centered-info thumb-info-no-borders border-radius-0">
                                                <span class="thumb-info-wrapper border-radius-0">
                                                    <img src="{{ !empty($gallery->img) ? asset($gallery->img) : asset('cd-project/img/default-team-member.png') }}" class="img-fluid border-radius-0" alt="{{ $gallery->title }}">
                                                    <span class="thumb-info-action">
                                                        <span class="thumb-info-action-icon bg-dark opacity-8"><i class="fas fa-plus"></i></span>
                                                    </span>
                                                </span>
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @else
                    <!-- Mensaje Galería Vacía -->
                    <div class="text-center py-5">
                        <div class="overflow-hidden mb-2">
                            <h2 class="font-weight-normal text-10 ls-1 mb-0 appear-animation" data-appear-animation="maskUp" style="animation-delay: 100ms;">
                                <strong class="font-weight-extra-bold">Galería en Construcción</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;">
                                Aún no se han cargado imágenes en la galería.<br>Por favor, vuelve más tarde.
                            </p>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</section>

@push('styles')
<style>
/* Ocultar título y descripción en hover de galería */
.portfolio-item .thumb-info-title {
    display: none !important;
}

/* Asegurar que el overlay con el ícono se muestre correctamente */
.portfolio-item .thumb-info-wrapper:hover .thumb-info-action {
    opacity: 1;
    visibility: visible;
}

.portfolio-item .thumb-info-action {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}
</style>
@endpush

@endsection